پیشنمایش زنده
کد HTML
<div
class="w-72 h-40 flex flex-col justify-center gap-2 bg-neutral-50 rounded-lg shadow p-2"
>
<div class="flex gap-2">
<img class="bg-neutral-500 w-24 h-24 shrink-0 rounded-lg" alt="" />
<div class="flex flex-col">
<span class="font-bold text-neutral-700 italic">Card title</span>
<p class="line-clamp-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non
dolor augue. Nunc dictum erat sit amet iaculis interdum. Ut neque
tellus, congue vel lectus aliquam, dignissim porttitor velit.
</p>
</div>
</div>
<button
class="hover:bg-indigo-700 bg-indigo-500 font-bold text-neutral-50 rounded p-2"
>
See more
</button>
</div>
کد CSS
.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.flex{display:flex}.h-24{height:6rem}.h-40{height:10rem}.w-24{width:6rem}.w-72{width:18rem}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-500{--tw-bg-opacity:1;background-color:rgb(115 115 115 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.font-bold{font-weight:700}.italic{font-style:italic}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}