پیشنمایش زنده
کد HTML
<div
class="cursor-pointer overflow-hidden relative transition-all duration-500 hover:translate-y-2 w-72 h-44 bg-neutral-50 rounded-lg shadow-xl flex flex-row items-center justify-evenly gap-2 p-2 before:absolute before:w-full hover:before:top-0 before:duration-500 before:-top-1 before:h-1 before:bg-purple-200"
>
<svg
class="stroke-purple-200 shrink-0"
height="50"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 100"
width="50"
x="0"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
d="M17.9,60.7A14.3,14.3,0,0,0,32.2,75H64.3a17.9,17.9,0,0,0,0-35.7h-.4a17.8,17.8,0,0,0-35.3,3.6,17.2,17.2,0,0,0,.4,3.9A14.3,14.3,0,0,0,17.9,60.7Z"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="8"
></path>
</svg>
<div>
<span class="font-bold">Card title</span>
<p class="line-clamp-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
</div>
کد CSS
.relative{position:relative}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.flex{display:flex}.h-44{height:11rem}.w-72{width:18rem}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-evenly{justify-content:space-evenly}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.stroke-purple-200{stroke:#e9d5ff}.p-2{padding:0.5rem}.font-bold{font-weight:700}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:-top-1::before{content:var(--tw-content);top:-0.25rem}.before\:h-1::before{content:var(--tw-content);height:0.25rem}.before\:w-full::before{content:var(--tw-content);width:100%}.before\:bg-purple-200::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(233 213 255 / var(--tw-bg-opacity))}.before\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.hover\:translate-y-2:hover{--tw-translate-y:0.5rem;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\:before\:top-0:hover::before{content:var(--tw-content);top:0px}