پیشنمایش زنده
کد HTML
<div class="bg-white w-48 h-64 rounded-lg">
<div class="flex p-2 gap-1">
<div class="">
<span class="bg-red-500 inline-block center w-3 h-3 rounded-full"></span>
</div>
<div class="circle">
<span class="bg-yellow-500 inline-block center w-3 h-3 rounded-full"></span>
</div>
<div class="circle">
<span class="bg-green-500 box inline-block center w-3 h-3 rounded-full"></span>
</div>
</div>
<div class="card__content">
</div>
</div>
کد CSS
.inline-block {
display: inline-block
}
.flex {
display: flex
}
.h-3 {
height: 0.75rem
}
.h-64 {
height: 16rem
}
.w-3 {
width: 0.75rem
}
.w-48 {
width: 12rem
}
.gap-1 {
gap: 0.25rem
}
.rounded-full {
border-radius: 9999px
}
.rounded-lg {
border-radius: 0.5rem
}
.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-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity))
}
.p-2 {
padding: 0.5rem
}