Card by Uncannypotato69

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-[7em] w-[7em] bg-[#FDEE00] rounded-full absolute bottom-full -left-[3.5em] group-hover:scale-[550%] z-[-1] duration-[400ms]"
6  ></div>
7  <div
8    class="h-[6em] w-[6em] bg-[#7CFC00] rounded-full absolute bottom-full -left-[3.5em] group-hover:scale-[400%] z-[-1] duration-[400ms]"
9  ></div>
10  <div
11    class="h-[5em] w-[5em] bg-[#007FFF] rounded-full absolute bottom-full -left-[3.5em] group-hover:scale-[300%] z-[-1] duration-[400ms]"
12  ></div>
13
14  <button
15    class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-white duration-100"
16  >
17    <span
18      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"
19      >More Info</span
20    >
21    <i class="fa-solid fa-arrow-right"></i>
22  </button>
23
24  <h1
25    class="z-20 font-bold font-Poppin text-[1.4em] group-hover:text-white duration-100"
26  >
27    HEADING
28  </h1>
29</div>
30