Cards | Uncannypotato69 serious frog 21

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  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]"
>
  <div>
    <h1 class="text-[2em] font-medium">Heading</h1>
    <p class="text-[0.85em]">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
      blanditiis pariatur sequi magni.
    </p>
  </div>

  <button
    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]"
  >
    <p>Button</p>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="white"
      viewBox="0 0 24 24"
      stroke-width="1"
      stroke="currentColor"
      class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
    >
      <path