پیشنمایش زنده
کد HTML
<div
class="w-72 h-40 flex flex-col justify-center gap-2 bg-indigo-500 rounded-lg shadow p-2"
>
<div class="flex gap-2">
<img alt="" class="bg-purple-200 w-24 h-24 shrink-0 rounded-lg" />
<div class="flex flex-col text-white">
<span class="font-bold 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-purple-300 bg-neutral-50 font-bold text-indigo-500 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-purple-200 {
--tw-bg-opacity: 1;
background-color: rgb(233 213 255 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.font-bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / 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-purple-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(216 180 254 / var(--tw-bg-opacity));
}