Cards | SmookyDev odd grasshopper 27

<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="para uppercase text-center leading-none z-40">
    <p
      style="-webkit-text-stroke: 1px rgb(207, 205, 205);
                -webkit-text-fill-color: transparent;"
      class="z-10 font-bold text-lg -mb-5 tracking-wider text-gray-500"
    >
      New Product
    </p>
    <p class="font-bold text-xl tracking-wider text-[#495c48] z-30">
      New Product
    </p>
  </div>
  <div
    class="w-[180px] aspect-square relative z-20 after:absolute after:h-1 after:w-full after:opacity-0 after:bg-[#7b956a] after:top-8 after:left-0 after:group-hover:opacity-100 after:translate-x-1/2 after:translate-y-1/2 after:-z-20 after:group-hover:w-full after:transition-all after:duration-300 after:group-hover:origin-right after:group-hover:-translate-x-1/2 group-hover:translate-x-1/2 transition-all duration-300"
  >
    <svg
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      text-rendering="geometricPrecision"
      shape-rendering="geometricPrecision"