پیشنمایش زنده
کد HTML
<div class="w-72 h-80 mx-auto bg-gray-100 rounded-xl shadow-2xl">
<div class="flex items-center p-3">
<div class="px-1">
<span class="w-4 h-4 rounded-full inline-block bg-red-500 cursor-pointer"></span>
</div>
<div class="px-1">
<span class="w-4 h-4 rounded-full inline-block bg-yellow-400 cursor-pointer"></span>
</div>
<div class="px-1">
<span class="w-4 h-4 rounded-full inline-block bg-green-500 cursor-pointer"></span>
</div>
</div>
</div>
کد CSS
.mx-auto {
margin-left: auto;
margin-right: auto
}
.inline-block {
display: inline-block
}
.flex {
display: flex
}
.h-4 {
height: 1rem
}
.h-80 {
height: 20rem
}
.w-4 {
width: 1rem
}
.w-72 {
width: 18rem
}
.cursor-pointer {
cursor: pointer
}
.items-center {
align-items: center
}
.rounded-full {
border-radius: 9999px
}
.rounded-xl {
border-radius: 0.75rem
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}
.bg-yellow-400 {
--tw-bg-opacity: 1;
background-color: rgb(250 204 21 / var(--tw-bg-opacity))
}
.p-3 {
padding: 0.75rem
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}