Card by Uncannypotato69
#e8e8e8
HTML +TailwindCSS
1<div 2 class="div h-[8em] w-[15em] bg-white m-auto rounded-[1em] overflow-hidden relative group p-2 z-0" 3> 4 <div 5 class="circle absolute h-[5em] w-[5em] -top-[2.5em] -right-[2.5em] rounded-full bg-[#FF5800] group-hover:scale-[800%] duration-500 z-[-1] op" 6 ></div> 7 8 <button 9 class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-[white] duration-500" 10 > 11 <span 12 class="relative before:h-[0.16em] before:absolute before:w-full before:content-[''] before:bg-[#6C3082] group-hover:before:bg-[white] duration-300 before:bottom-0 before:left-0" 13 >More Info</span 14 > 15 <i class="fa-solid fa-arrow-right"></i> 16 </button> 17 18 <h1 19 class="z-20 font-bold font-Poppin group-hover:text-white duration-500 text-[1.4em]" 20 > 21 HEADING 22 </h1> 23</div> 24
285 views
285 views
Variations
4135 views
134 views
117 views
MIT License