Card by Uncannypotato69

1<div
2  class="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-1/5 bg-[#FDEE00] absolute left-0 bottom-full z-[-1] group-hover:translate-y-full duration-500"
6  ></div>
7  <div
8    class="h-1/3 w-full bg-[#FF5800] absolute left-[120%] top-0 z-[-1] group-hover:-translate-x-full duration-500"
9  ></div>
10  <div
11    class="h-1/3 w-full bg-[#007FFF] absolute right-[100%] top-1/3 z-[-1] group-hover:translate-x-full duration-500"
12  ></div>
13  <div
14    class="h-full w-4/5 bg-[#7CFC00] absolute left-[20%] top-full z-[-1] group-hover:-translate-y-[33.3%] duration-500"
15  ></div>
16
17  <button
18    class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-white duration-100"
19  >
20    <span
21      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"
22      >More Info</span
23    >
24    <i class="fa-solid fa-arrow-right"></i>
25  </button>
26
27  <h1
28    class="z-20 font-bold font-Poppin text-[1.4em] group-hover:text-white delay-100 duration-100"
29  >
30    HEADING
31  </h1>
32</div>
33