Cards | Javierrocadev sweet cat 65

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="group relative overflow-hidden h-72 w-64 bg-sky-300 rounded-xl">
  <div
    class="absolute w-56 h-64 bg-gray-50 z-10 top-4 left-4 opacity-50 rounded-2xl blur duration-300 group-hover:blur-none [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]"
  ></div>
  <div
    class="absolute w-56 h-64 z-10 top-4 left-4 p-3 rounded-2xl flex flex-col justify-end items-start gap-4 [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]"
  >
    <span class="text-red-800 text-2xl font-extrabold">Card title</span>
    <p class="text-gray-800 font-bold">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor.
    </p>
    <button
      class="bg-gray-50 px-3 py-2 rounded-xl hover:bg-sky-600 duration-300"
    >
      See more
    </button>
  </div>

  <svg
    y="0"
    xmlns="http://www.w3.org/2000/svg"
    x="0"
    width="100"