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="h-full w-[20%] bg-[#FDEE00] absolute left-0 bottom-full z-[-1] group-hover:translate-y-full duration-[400ms]" 6 ></div> 7 <div 8 class="h-full w-[20%] bg-[#7CFC00] absolute left-[20%] top-full z-[-1] group-hover:-translate-y-full duration-[400ms] delay-[50ms]" 9 ></div> 10 <div 11 class="h-full w-[20%] bg-[#007FFF] absolute left-[40%] bottom-full z-[-1] group-hover:translate-y-full duration-[400ms] delay-[100ms]" 12 ></div> 13 <div 14 class="h-full w-[20%] bg-[#FF5800] absolute left-[60%] top-full z-[-1] group-hover:-translate-y-full duration-[400ms] delay-[150ms]" 15 ></div> 16 <div 17 class="h-full w-[20%] bg-[#FF66CC] absolute left-[80%] bottom-full z-[-1] group-hover:translate-y-full duration-[400ms] delay-[200ms]" 18 ></div> 19 20 <button 21 class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-white duration-100" 22 > 23 <span 24 class="relative before:h-[0.16em] before:absolute before:w-full before:content-[''] before:bg-[#6C3082] group-hover:before:bg-white duration-100 before:bottom-0 before:left-0" 25 >More Info</span 26 > 27 <i class="fa-solid fa-arrow-right"></i> 28 </button> 29 30 <h1 31 class="z-20 font-bold font-Poppin text-[1.4em] group-hover:text-white duration-100" 32 > 33 HEADING 34 </h1> 35</div> 36
132 views
Variation of acard
MIT License