mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
41 lines
No EOL
2 KiB
HTML
41 lines
No EOL
2 KiB
HTML
<!-- From Uiverse.io by SmookyDev - Tags: animation, email, card, card template, cool card, cardhover , card animation, tailwind -->
|
||
<div class="card">
|
||
<div
|
||
class="relative bg-black w-[300px] sm:w-[350px] group transition-all duration-700 aspect-video flex items-center justify-center"
|
||
>
|
||
<div
|
||
class="transition-all flex flex-col items-center py-5 justify-start duration-300 group-hover:duration-1000 bg-white w-full h-full absolute group-hover:-translate-y-16"
|
||
>
|
||
<p class="text-xl sm:text-2xl font-semibold text-gray-500 font-serif">
|
||
Thank You
|
||
</p>
|
||
<p class="px-10 text-[10px] sm:text-[12px] text-gray-700">
|
||
It’s so nice that you had the time to view this idea
|
||
</p>
|
||
<p class="font-serif text-[10px] sm:text-[12px text-gray-700">
|
||
Wishing you a fantastic day ahead!
|
||
</p>
|
||
<p class="font-sans text-[10px] text-gray-700 pt-5">SMOOKYDEV</p>
|
||
</div>
|
||
<button
|
||
class="seal bg-rose-500 text-red-800 w-10 aspect-square rounded-full z-40 text-[10px] flex items-center justify-center font-semibold [clip-path:polygon(50%_0%,_80%_10%,_100%_35%,_100%_70%,_80%_90%,_50%_100%,_20%_90%,_0%_70%,_0%_35%,_20%_10%)] group-hover:opacity-0 transition-all duration-1000 group-hover:scale-0 group-hover:rotate-180 border-4 border-rose-900"
|
||
>
|
||
SMKY
|
||
</button>
|
||
<div
|
||
class="tp transition-all duration-1000 group-hover:duration-100 bg-neutral-800 absolute group-hover:[clip-path:polygon(50%_0%,_100%_0,_0_0)] w-full h-full [clip-path:polygon(50%_50%,_100%_0,_0_0)]"
|
||
></div>
|
||
<div
|
||
class="lft transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_0_0,_0_100%)]"
|
||
></div>
|
||
<div
|
||
class="rgt transition-all duration-700 absolute w-full h-full bg-neutral-800 [clip-path:polygon(50%_50%,_100%_0,_100%_100%)]"
|
||
></div>
|
||
<div
|
||
class="btm transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_100%_100%,_0_100%)]"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|