mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
33 lines
No EOL
1 KiB
HTML
33 lines
No EOL
1 KiB
HTML
<!-- From Uiverse.io by Javierrocadev - Tags: simple, purple, card, hover, hover effect, card hover, tailwind -->
|
|
<div
|
|
class="cursor-pointer transition-all duration-500 hover:translate-y-2 w-72 h-40 bg-neutral-50 rounded-lg shadow-xl flex flex-row items-center justify-evenly gap-4 px-4"
|
|
>
|
|
<svg
|
|
class="stroke-purple-300 shrink-0 rounded-full"
|
|
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 text-purple-300">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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|