Card by Uncannypotato69
#e8e8e8
HTML +TailwindCSS
1<div 2 class="div h-[8em] w-[15em] bg-white m-auto rounded-[1em] relative group p-2 z-0 overflow-hidden" 3> 4 <div 5 class="z-[-1] h-full w-[200%] rounded-[1em] bg-gradient-to-br from-green-400 via-lime-400 to-yellow-400 absolute bottom-full right-0 group-hover:-rotate-90 group-hover:h-[300%] duration-500 origin-bottom-right" 6 ></div> 7 8 <button 9 class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-[white]" 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-50 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 delay-150 text-[1.4em]" 20 > 21 HEADING 22 </h1> 23</div> 24
211 views
Variation of acard
MIT License