Product List Happysocks - Tailwind Component

<section>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div
        class="flex flex-row justify-between w-full mb-14 border-t-2 border-b-2 py-5 px-8 text-lg font-medium border-gray-700">
        <div>
          <p>Mini & Me | Matching prints for the whole family</p>
        </div>
        <div>
          <button class="text-lg font-medium inline-flex items-center hover:underline">Show More
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-4" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd"
                d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:px-0">
            <div class="block overflow-hidden group">
              <div
                class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
                <img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
                  src="https://media.happysocks.com/catalog/product/m/a/magentoimage_my8mlxdouryfyuns.png"
                  alt="Basic Tee Product" />
              </div>
              <div class="relative pt-4 text-center">
                <h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
                  Bunana Break Sock
                </h3>
                <p>14.00 GBP</p>
              </div>
            </div>
            <div class="block overflow-hidden group">
              <div
                class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
                <img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
                  src="https://media.happysocks.com/catalog/product/m/a/magentoimage_ld6001p8bu9d6esg.png"
                  alt="Basic Tee Product" />
              </div>
              <div class="relative pt-4 text-center">
                <h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
                  Bunny Sock
                </h3>
                <p>14.00 GBP</p>
              </div>
            </div>
            <div class="block overflow-hidden group">
              <div
                class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
                <img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
                  src="https://media.happysocks.com/catalog/product/h/t/httpsasset.productmarketingcloud.comapiassetstorage233_c6833ec2-691f-4f8c-8f8a-a3ecbbe00f70magentoimage.png"
                  alt="Basic Tee Product" />
              </div>
              <div class="relative pt-4 text-center">
                <h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
                  Cherry Sock
                </h3>
                <p>14.00 GBP</p>
              </div>
            </div>
            <div class="block overflow-hidden group">
              <div
                class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
                <img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
                  src="https://media.happysocks.com/catalog/product/h/t/httpsasset.productmarketingcloud.comapiassetstorage233_c64e8cdb-d11b-4566-89f1-eda3a34037d0magentoimage.png"
                  alt="Basic Tee Product" />
              </div>
              <div class="relative pt-4 text-center">
                <h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
                  Big Dot Sock
                </h3>
                <p>14.00 GBP</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 lg:-mt-16">
          <div class="relative group">
            <img src="https://a.storyblok.com/f/54304/1400x1680/f879ef5c1b/ss22_minime_webb_collectionimage.jpg"
              alt="Colorful frame. A child in blue socks. Big feet in matching blue socks"
              class="w-full rounded shadow-xl hover:shadow-2xl" />
            <img class="absolute top-0" src="https://a.storyblok.com/f/54304/x/af86e6fc33/ss22_minime_overlay.svg"
              alt="matching">
            <button
              class="absolute bottom-8 sm:text-xl font-semibold left-1/2 sm:left-52 sm:px-12 sm:py-3 py-2 px-6 border-b-8 border-l-2 shadow-lg bg-white border-black text-black">
              Show All
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  body {
    font-family: 'Space Mono', monospace;
  }
</style>