Cards | SmookyDev afraid liger 45

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  class="product-card w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-center justify-center gap-3 transition-all duration-300 group"
>
  <div
    class="absolute -left-[40%] top-0 group-hover:rotate-12 transition-all duration-300 group-hover:scale-150"
  >
    <div class="flex gap-1">
      <svg
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="1"
        fill="none"
        viewBox="0 0 24 24"
        class="fill-gray-300 rotate-[24deg]"
        height="200"
        width="200"
        xmlns="http://www.w3.org/2000/svg"
      >
        <polygon
          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
        ></polygon>
      </svg>
    </div>
  </div>