پیشنمایش زنده
کد HTML
<div class="bg-gray-100 max-w-sm mx-auto rounded shadow-md">
<div class="text-center p-6">
<p class="text-lg font-bold mb-0">
Allow this device to access photos and videos?
</p>
<p class="text-sm mb-0">
This device will be able to access photos and videos while it is connected
to your iPhone.
</p>
</div>
<div class="border-t border-gray-300 flex justify-center p-0">
<div class="flex-1 text-center">
<button
class="text-blue-600 hover:bg-white hover:rounded-bl-md w-full py-2"
type="button"
>
Allow
</button>
</div>
<div class="border-l border-gray-300"></div>
<div class="flex-1 text-center">
<button
class="text-blue-600 font-bold hover:bg-white hover:rounded-br-md w-full py-2"
type="button"
>
Don't Allow
</button>
</div>
</div>
</div>
کد CSS
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-0 {
margin-bottom: 0px;
}
.flex {
display: flex;
}
.w-full {
width: 100%;
}
.max-w-sm {
max-width: 24rem;
}
.flex-1 {
flex: 1 1 0%;
}
.justify-center {
justify-content: center;
}
.rounded {
border-radius: 0.25rem;
}
.border-l {
border-left-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.p-0 {
padding: 0px;
}
.p-6 {
padding: 1.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.text-center {
text-align: center;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-bold {
font-weight: 700;
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:rounded-bl-md:hover {
border-bottom-left-radius: 0.375rem;
}
.hover\:rounded-br-md:hover {
border-bottom-right-radius: 0.375rem;
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}