پیشنمایش زنده
کد HTML
<div class="flex flex-col bg-white w-72 h-48 rounded-md py-4 px-6 border">
<h3 class="text-center font-bold text-xl text-gray-800 pb-2">$300.00</h3>
<h3 class="text-base font-semibold text-gray-900">Product Name</h3>
<p class="text-sm text-gray-500 pb-3">Product Description</p>
<div class="flex gap-2 text-sm text-gray-500 border-b pb-2">
<p class="">last update:</p>
<p>14/08/2023</p>
</div>
<div class="flex justify-around items-center py-3">
<div class="flex gap-2 text-gray-600 hover:scale-110 duration-200 hover:cursor-pointer">
<svg class="w-6 stroke-green-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
<button class="font-semibold text-sm text-green-700">Edit</button>
</div>
<div class="flex gap-2 text-gray-600 hover:scale-110 duration-200 hover:cursor-pointer">
<svg class="w-6 stroke-red-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
<button class="font-semibold text-sm text-red-700">Delete</button>
</div>
</div>
</div>
کد CSS
.flex{display:flex}.h-48{height:12rem}.w-6{width:1.5rem}.w-72{width:18rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-around{justify-content:space-around}.gap-2{gap:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.stroke-green-700{stroke:#15803d}.stroke-red-700{stroke:#b91c1c}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:0.5rem}.pb-3{padding-bottom:0.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:cursor-pointer:hover{cursor:pointer}