Card by SmookyDev
#e8e8e8
HTML +TailwindCSS
1<div class="card"> 2 <div 3 class="relative bg-black w-[300px] sm:w-[350px] group transition-all duration-700 aspect-video flex items-center justify-center" 4 > 5 <div 6 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" 7 > 8 <p class="text-xl sm:text-2xl font-semibold text-gray-500 font-serif"> 9 Thank You 10 </p> 11 <p class="px-10 text-[10px] sm:text-[12px] text-gray-700"> 12 It’s so nice that you had the time to view this idea 13 </p> 14 <p class="font-serif text-[10px] sm:text-[12px text-gray-700"> 15 Wishing you a fantastic day ahead! 16 </p> 17 <p class="font-sans text-[10px] text-gray-700 pt-5">SMOOKYDEV</p> 18 </div> 19 <button 20 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" 21 > 22 SMKY 23 </button> 24 <div 25 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)]" 26 ></div> 27 <div 28 class="lft transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_0_0,_0_100%)]" 29 ></div> 30 <div 31 class="rgt transition-all duration-700 absolute w-full h-full bg-neutral-800 [clip-path:polygon(50%_50%,_100%_0,_100%_100%)]" 32 ></div> 33 <div 34 class="btm transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_100%_100%,_0_100%)]" 35 ></div> 36 </div> 37</div> 38
1.6K views
1.6K views
MIT License