پیشنمایش زنده
کد HTML
<div class="bg-gray-200 w-48 h-64 rounded-lg">
<div class="flex p-2 gap-1">
<div class="">
<span class="bg-teal-500 inline-block center w-3 h-3 rounded-full"></span>
</div>
<div class="circle">
<span class="bg-orange-500 inline-block center w-3 h-3 rounded-full"></span>
</div>
<div class="circle">
<span class="bg-indigo-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-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity))
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity))
}
.bg-teal-500 {
--tw-bg-opacity: 1;
background-color: rgb(20 184 166 / var(--tw-bg-opacity))
}
.p-2 {
padding: 0.5rem
}