1<div
2  class="h-[12em] w-[18em] border-2 border-[rgba(75,30,133,0.5)] rounded-[1.5em] bg-gradient-to-br from-[rgba(75,30,133,1)] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px]"
3>
4  <div>
5    <h1 class="text-[2em] font-medium">Heading</h1>
6    <p class="text-[0.85em]">
7      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
8      blanditiis pariatur sequi magni.
9    </p>
10  </div>
11
12  <button
13    class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]"
14  >
15    <p>Button</p>
16    <svg
17      xmlns="http://www.w3.org/2000/svg"
18      fill="white"
19      viewBox="0 0 24 24"
20      stroke-width="1"
21      stroke="currentColor"
22      class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
23    >
24      <path
25        stroke-linecap="round"
26        stroke-linejoin="round"
27        d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
28      ></path>
29    </svg>
30  </button>
31</div>
32