E-Commerce (Products) Components in Shopal library

<section class="py-24 bg-gray-900" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h1 class="font-heading text-4xl font-black text-white">New arrivals</h1>
    </div>
    <div class="max-w-sm md:max-w-2xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product1.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product2.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product3.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product4.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product5.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product6.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product7.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product8.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product1.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product2.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product3.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product4.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
      </div>
    </div>
    <div class="mt-14 text-center">
      <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="group relative inline-block h-12 max-w-sm w-full md:w-34 bg-blueGray-900 rounded-md" href="#">
        <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
          <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
            <span class="text-base font-black text-white">Show more</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>