پیشنمایش زنده
کد HTML
<div class="w-60 h-80 bg-gray-50 p-3 flex flex-col gap-1 rounded-2xl">
<div class="h-48 bg-gray-700 rounded-xl"></div>
<div class="flex flex-col gap-4">
<div class="flex flex-row justify-between">
<div class="flex flex-col">
<span class="text-xl font-bold">Long Chair</span>
<p class="text-xs text-gray-700">ID: 23432252</p>
</div>
<span class="font-bold text-red-600">$25.99</span>
</div>
<button class="hover:bg-sky-700 text-gray-50 bg-sky-800 py-2 rounded-md">Add to cart</button>
</div>
</div>
کد CSS
.flex {
display: flex
}
.h-48 {
height: 12rem
}
.h-80 {
height: 20rem
}
.w-60 {
width: 15rem
}
.flex-row {
flex-direction: row
}
.flex-col {
flex-direction: column
}
.justify-between {
justify-content: space-between
}
.gap-1 {
gap: 0.25rem
}
.gap-4 {
gap: 1rem
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-md {
border-radius: 0.375rem
}
.rounded-xl {
border-radius: 0.75rem
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity))
}
.bg-sky-800 {
--tw-bg-opacity: 1;
background-color: rgb(7 89 133 / var(--tw-bg-opacity))
}
.p-3 {
padding: 0.75rem
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity))
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity))
}
.hover\:bg-sky-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(3 105 161 / var(--tw-bg-opacity))
}