Tailwind CSS E-commerce (products) Components

<section x-data="{ showContent: false }">
  <div class="pt-12 pb-24 2xl:pb-44 bg-blueGray-100">
    <div class="container px-4 mx-auto">
      <ul class="flex flex-wrap items-center mb-10 xl:mb-0">
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Home</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Store</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">New in</a></li>
      </ul>
      <div class="pb-9 text-center border-b border-black border-opacity-5">
        <div class="relative">
          <h2 class="mb-5 md:mb-0 text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">New in</h2>
          <span class="md:absolute md:right-0 md:bottom-3 text-sm text-gray-400 font-medium">449 products found</span>
        </div>
      </div>
      <div class="mb-16 flex flex-wrap py-5 border-b border-black border-opacity-10">
        <div class="w-full sm:w-1/3 lg:w-1/5 py-2 sm:px-3">
          <a class="flex items-center py-5 px-8 xl:px-12 font-heading font-medium border border-gray-200 hover:border-gray-300 rounded-4xl" href="#">
            <span>Category</span>
            <svg class="relative top-px ml-6" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/5 py-2 sm:px-3">
          <a class="flex items-center py-5 px-8 xl:px-12 font-heading font-medium border border-gray-200 hover:border-gray-300 rounded-4xl" href="#">
            <span>Size</span>
            <svg class="relative top-px ml-6" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/5 py-2 sm:px-3">
          <a class="flex items-center py-5 px-8 xl:px-12 font-heading font-medium border border-gray-200 hover:border-gray-300 rounded-4xl" href="#">
            <span>Colors</span>
            <svg class="relative top-px ml-6" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/5 py-2 sm:px-3">
          <a class="flex items-center py-5 px-8 xl:px-12 font-heading font-medium border border-gray-200 hover:border-gray-300 rounded-4xl" href="#">
            <span>Price</span>
            <svg class="relative top-px ml-6" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/5 py-2 sm:px-3">
          <a class="flex items-center py-5 px-8 xl:px-12 font-heading font-medium border border-gray-200 hover:border-gray-300 rounded-4xl" href="#">
            <span>Brand</span>
            <svg class="relative top-px ml-6" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="flex flex-wrap -mx-3 mb-20 md:mb-40">
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/iphone-12-pro.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Apple iPhone 12 Pro (128GB) Silver</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>544.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/headphones-sony.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Headphones SONY 1l X-O</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>44.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/macbook-pro-17.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">MacBook Pro 17’’</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>2090.59</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartwatch-green.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Smartwatch Uistore Homme Watch 19</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>120.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/macbook-pro-15.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">MacBook Pro 15’’ new</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>1780.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartwatch-yellow.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Xui Smartwatch YW</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>100.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/headphones-blacksaint.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Headphones Blacksaint 3</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>42.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartphone.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Wiko Y51 1GB/16GB 5.45’’ Syrena Lol</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>376.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24 xl:mb-0">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/xiaomi-camera.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Kamera Xiaomi Mi Home Security Camera 2K 360°</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>37.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24 lg:mb-0">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartwatch-green.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Smartwatch Uistore Homme Watch 19</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>120.90</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24 sm:mb-0">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover mx-auto" src="uinel-assets/images/ecommerce-product-list/xiaomi-camera2.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Kamera Xiaomi Mi Home Security Camera 2K Pro 360°</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>29.59</span>
          </p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
          <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
            <a class="block mx-auto max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartwatch-blue.png" alt="">
            </a>
          </div>
          <a href="#">
            <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Xui Smartwatch Pr</p>
          </a>
          <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
            <span class="text-base pr-2">$</span>
            <span>44.90</span>
          </p>
        </div>
        <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/iphone-12-pro.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Apple iPhone 12 Pro (128GB) Silver</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>544.90</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/headphones-sony.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Headphones SONY 1l X-O</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>44.90</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/macbook-pro-17.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">MacBook Pro 17’’</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>2090.59</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3 mb-24">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartwatch-green.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Smartwatch Uistore Homme Watch 19</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>120.90</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/macbook-pro-15.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">MacBook Pro 15’’ new</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>1780.90</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartwatch-yellow.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Xui Smartwatch YW</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>100.90</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/headphones-blacksaint.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Headphones Blacksaint 3</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>42.90</span>
            </p>
          </div>
          <div :class="{'hidden': !showContent}" class="hidden w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-3">
            <div class="xl:flex xl:items-center p-10 xl:py-32 mb-8 bg-white rounded-3xl">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/smartphone.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Wiko Y51 1GB/16GB 5.45’’ Syrena Lol</p>
            </a>
            <p class="text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="text-base pr-2">$</span>
              <span>376.90</span>
            </p>
          </div>
      </div>
      <div class="sm:mx-auto sm:w-96"><a x-on:click.prevent="showContent = true" x-show="!showContent" class="block py-5 px-10 w-full text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">More products</a></div>
    </div>
  </div>
</section>

<section class="py-20" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-24">
      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
        <div class="relative mb-10" style="height: 564px;">
          <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="absolute z-50 top-1/2 left-0 ml-8 transform translate-1/2" href="#">
            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 16.0185C9.268 16.2905 9.268 16.7275 9 16.9975C8.732 17.2675 8.299 17.2685 8.031 16.9975L0.201 9.0895C-0.067 8.8195 -0.067 8.3825 0.201 8.1105L8.031 0.2025C8.299 -0.0675 8.732 -0.0675 9 0.2025C9.268 0.4735 9.268 0.9115 9 1.1815L1.859 8.6005L9 16.0185Z" fill="#1F40FF"></path>
            </svg>
          </a>
          <div class="overflow-hidden h-full">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <img class="object-cover w-full h-full" src="yofte-assets/images/product-bottle.png" alt="">
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <img class="object-cover w-full h-full" src="yofte-assets/images/product-bottle2.png" alt="">
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <img class="object-cover w-full h-full" src="yofte-assets/images/product-bottle3.png" alt="">
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full">
                    <img class="object-cover w-full h-full" src="yofte-assets/images/product-bottle4.png" alt="">
                </div>
            </div>
          </div>
          <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="absolute z-50 top-1/2 right-0 mr-8 transform translate-1/2" href="#">
            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.19922 1.1817C-0.0687795 0.909696 -0.0687794 0.472695 0.19922 0.202695C0.46722 -0.0673054 0.90022 -0.0683048 1.16822 0.202695L8.99822 8.11069C9.26622 8.3807 9.26622 8.81769 8.99822 9.08969L1.16822 16.9977C0.900219 17.2677 0.467218 17.2677 0.199219 16.9977C-0.0687809 16.7267 -0.0687808 16.2887 0.199219 16.0187L7.34022 8.5997L0.19922 1.1817Z" fill="#1F40FF"></path>
            </svg>
          </a>
        </div>
        <div class="flex flex-wrap -mx-2">
          <div class="w-1/2 sm:w-1/4 p-2">
            <a x-on:click.prevent="activeSlide=0" class="block border border-blue-300" :class="{ 'border-blue-300': activeSlide==0, 'border-transparent hover:border-gray-400': activeSlide!=0 }" href="#">
              <img class="w-full h-32 object-cover" src="yofte-assets/images/product-bottle.png" alt="">
            </a>
          </div>
          <div class="w-1/2 sm:w-1/4 p-2">
            <a x-on:click.prevent="activeSlide=1" class="block border hover:border-gray-400" :class="{ 'border-blue-300': activeSlide==1, 'border-transparent hover:border-gray-400': activeSlide!=1 }" href="#">
              <img class="w-full h-32 object-cover" src="yofte-assets/images/product-bottle2.png" alt="">
            </a>
          </div>
          <div class="w-1/2 sm:w-1/4 p-2">
            <a x-on:click.prevent="activeSlide=2" class="block border hover:border-gray-400" :class="{ 'border-blue-300': activeSlide==2, 'border-transparent hover:border-gray-400': activeSlide!=2 }" href="#">
              <img class="w-full h-32 object-cover" src="yofte-assets/images/product-bottle3.png" alt="">
            </a>
          </div>
          <div class="w-1/2 sm:w-1/4 p-2">
            <a x-on:click.prevent="activeSlide=3" class="block border hover:border-gray-400" :class="{ 'border-blue-300': activeSlide==3, 'border-transparent hover:border-gray-400': activeSlide!=3 }" href="#">
              <img class="w-full h-32 object-cover" src="yofte-assets/images/product-bottle4.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="lg:pl-20">
          <div class="mb-10 pb-10 border-b">
            <span class="text-gray-500">Brille</span>
            <h2 class="mt-2 mb-6 max-w-xl text-5xl md:text-6xl font-bold font-heading">BRILE water filter carafe</h2>
            <div class="mb-8">
              <button>
                <img src="yofte-assets/elements/star-gold.svg" alt="">
              </button>
              <button>
                <img src="yofte-assets/elements/star-gold.svg" alt="">
              </button>
              <button>
                <img src="yofte-assets/elements/star-gold.svg" alt="">
              </button>
              <button>
                <img src="yofte-assets/elements/star-gold.svg" alt="">
              </button>
              <button>
                <img src="yofte-assets/elements/star-gray.svg" alt="">
              </button>
            </div>
            <p class="inline-block mb-8 text-2xl font-bold font-heading text-blue-300">
              <span>$29.99</span>
              <span class="font-normal text-base text-gray-400 line-through">$33.69</span>
            </p>
            <p class="max-w-md text-gray-500">Maecenas commodo libero ut molestie dictum. Morbi placerat eros id porttitor sagittis.</p>
          </div>
          <div class="flex mb-12">
            <div class="mr-6">
              <span class="block mb-4 font-bold font-heading text-gray-400 uppercase">QTY</span>
              <div class="inline-flex items-center px-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" x-data="{ quantity: 1 }">
                <button x-on:click="quantity > 1 ? quantity-- : quantity" class="py-2 hover:text-gray-700">
                  <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                </button>
                <input class="w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md" type="number" x-model="quantity" placeholder="1">
                <button x-on:click="quantity++" class="py-2 hover:text-gray-700">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                </button>
            </div>
            </div>
            <div>
              <span class="block mb-4 font-bold font-heading text-gray-400 uppercase">Size</span>
              <select class="pl-6 pr-10 py-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
                <option value="1">Medium</option>
                <option value="2">Small</option>
                <option value="3">Large</option>
              </select>
            </div>
          </div>
          <div class="flex flex-wrap -mx-4 mb-14 items-center">
            <div class="w-full xl:w-2/3 px-4 mb-4 xl:mb-0"><a class="block bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-5 px-8 rounded-md uppercase transition duration-200" href="#">Add to cart</a></div>
            <div class="w-full xl:w-1/3 px-4">
              <a class="ml-auto sm:ml-0 flex-shrink-0 inline-flex mr-4 items-center justify-center w-16 h-16 rounded-md border hover:border-gray-500" href="#">
                <svg class="w-6 h-6" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.4993 26.2061L4.70067 16.9253C3.9281 16.1443 3.41815 15.1374 3.24307 14.0471C3.06798 12.9568 3.23664 11.8385 3.72514 10.8505V10.8505C4.09415 10.1046 4.63318 9.45803 5.29779 8.96406C5.96241 8.47008 6.73359 8.14284 7.54782 8.00931C8.36204 7.87578 9.19599 7.93978 9.98095 8.19603C10.7659 8.45228 11.4794 8.89345 12.0627 9.48319L13.4993 10.9358L14.9359 9.48319C15.5192 8.89345 16.2327 8.45228 17.0177 8.19603C17.8026 7.93978 18.6366 7.87578 19.4508 8.00931C20.265 8.14284 21.0362 8.47008 21.7008 8.96406C22.3654 9.45803 22.9045 10.1046 23.2735 10.8505V10.8505C23.762 11.8385 23.9306 12.9568 23.7556 14.0471C23.5805 15.1374 23.0705 16.1443 22.298 16.9253L13.4993 26.2061Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
              <a class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 rounded-md border hover:border-gray-500" href="#">
                <svg class="w-6 h-6" width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.01328 18.9877C2.05682 16.7902 2.71436 12.9275 6.3326 9.87096L6.33277 9.87116L6.33979 9.86454L6.3398 9.86452C6.34682 9.85809 8.64847 7.74859 13.4997 7.74859C13.6702 7.74859 13.8443 7.75111 14.0206 7.757L14.0213 7.75702L14.453 7.76978L14.6331 7.77511V7.59486V3.49068L21.5728 10.5736L14.6331 17.6562V13.6558V13.5186L14.4998 13.4859L14.1812 13.4077C14.1807 13.4075 14.1801 13.4074 14.1792 13.4072M2.01328 18.9877L14.1792 13.4072M2.01328 18.9877C7.16281 11.8391 14.012 13.3662 14.1792 13.4072M2.01328 18.9877L14.1792 13.4072M23.125 10.6961L23.245 10.5736L23.125 10.4512L13.7449 0.877527L13.4449 0.571334V1V6.5473C8.22585 6.54663 5.70981 8.81683 5.54923 8.96832C-0.317573 13.927 0.931279 20.8573 0.946581 20.938L0.946636 20.9383L1.15618 22.0329L1.24364 22.4898L1.47901 22.0885L2.041 21.1305L2.04103 21.1305C4.18034 17.4815 6.71668 15.7763 8.8873 15.0074C10.9246 14.2858 12.6517 14.385 13.4449 14.4935V20.1473V20.576L13.7449 20.2698L23.125 10.6961Z" fill="black" stroke="black" stroke-width="0.35"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="flex items-center">
            <span class="mr-8 text-gray-500 font-bold font-heading uppercase">SHARE IT</span>
            <a class="mr-1 w-8 h-8" href="#">
              <img src="yofte-assets/buttons/facebook-circle.svg" alt="">
            </a>
            <a class="mr-1 w-8 h-8" href="#">
              <img src="yofte-assets/buttons/instagram-circle.svg" alt="">
            </a>
            <a class="w-8 h-8" href="#">
              <img src="yofte-assets/buttons/twitter-circle.svg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div>
      <ul class="flex flex-wrap mb-16 border-b-2">
        <li class="w-1/2 md:w-auto"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block py-6 px-10 text-gray-500 font-bold font-heading bg-white shadow-2xl" :class="{ 'bg-white shadow-2xl': tab == $refs.tab1.textContent }" href="#">Description</a></li>
        <li class="w-1/2 md:w-auto"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block py-6 px-10 text-gray-500 font-bold font-heading" :class="{ 'bg-white shadow-2xl': tab == $refs.tab2.textContent }" href="#">Customer reviews</a></li>
        <li class="w-1/2 md:w-auto"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="inline-block py-6 px-10 text-gray-500 font-bold font-heading" :class="{ 'bg-white shadow-2xl': tab == $refs.tab3.textContent }" href="#">Shipping &amp; returns</a></li>
        <li class="w-1/2 md:w-auto"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="inline-block py-6 px-10 text-gray-500 font-bold font-heading" :class="{ 'bg-white shadow-2xl': tab == $refs.tab4.textContent }" href="#">Brand</a></li>
      </ul>
      <h3 class="mb-8 text-3xl font-bold font-heading text-blue-300">Summer collection and laoreet get</h3>
      <p class="max-w-2xl text-gray-500">I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accums lorem sad. Morbi at auctor nibh. Aliquam tincidunt placerat mollis. Lorem euismod dignissim, felis tortor ollis eros, non ultricies turpis.</p>
    </div>
  </div>
</section>

<section class="py-16" x-data="{ price: 250, showContent: false, grid: 3, size: 38 }" x-init="size = $refs.size1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between mb-10">
        <h2 class="text-2xl sm:text-3xl font-bold">
          <span class="text-black">Found 420 results for</span>
          <span class="text-green-600">Lorem Ipsum</span>
        </h2>
        <div class="w-full lg:w-auto inline-flex items-center mt-6 lg:mt-0">
          <div class="group relative h-12 w-52 mr-6 border-2 border-black rounded-md overflow-hidden">
            <select class="w-full h-full px-4 text-sm font-bold appearance-none outline-none" name="" id="">
              <option value="1">Sort by Newest</option>
              <option value="1">Sort by Oldest</option>
              <option value="1">Sort by Price</option>
            </select>
            <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-black group-hover:text-indigo-500">
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
              </svg>
            </span>
          </div>
          <div class="inline-flex h-12 border-2 border-black rounded-md overflow-hidden">
            <a x-on:click.prevent="grid = 3" class="inline-flex items-center justify-center w-12 h-full border-r border-black bg-green-500 hover:bg-green-500 transition duration-300" :class="{ 'bg-green-500': grid == 3, 'bg-white': grid != 3 }" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.75 2V7.8H2C2 4.19 4.15 2.02 7.75 2Z" fill="black"></path>
                <path d="M22 7.8H16.25V2C19.85 2.02 22 4.19 22 7.8Z" fill="black"></path>
                <path d="M22 16.3C21.96 19.85 19.82 21.98 16.25 22V16.3H22Z" fill="black"></path>
                <path d="M7.75 16.3V22C4.18 21.98 2.04 19.85 2 16.3H7.75Z" fill="black"></path>
                <path d="M7.75 9.30005H2V14.8H7.75V9.30005Z" fill="black"></path>
                <path d="M22 9.30005H16.25V14.8H22V9.30005Z" fill="black"></path>
                <path d="M14.75 9.30005H9.25V14.8H14.75V9.30005Z" fill="black"></path>
                <path d="M14.75 2H9.25V7.8H14.75V2Z" fill="black"></path>
                <path d="M14.75 16.3H9.25V22H14.75V16.3Z" fill="black"></path>
              </svg>
            </a>
            <a x-on:click.prevent="grid = 4" class="inline-flex items-center justify-center w-12 h-full border-l border-black bg-white hover:bg-green-500 transition duration-300" :class="{ 'bg-green-500': grid == 4, 'bg-white': grid != 4 }" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 6.52V1.98C20 0.57 19.36 0 17.77 0H13.73C12.14 0 11.5 0.57 11.5 1.98V6.51C11.5 7.93 12.14 8.49 13.73 8.49H17.77C19.36 8.5 20 7.93 20 6.52Z" fill="black"></path>
                <path d="M20 17.77V13.73C20 12.14 19.36 11.5 17.77 11.5H13.73C12.14 11.5 11.5 12.14 11.5 13.73V17.77C11.5 19.36 12.14 20 13.73 20H17.77C19.36 20 20 19.36 20 17.77Z" fill="black"></path>
                <path d="M8.5 6.52V1.98C8.5 0.57 7.86 0 6.27 0H2.23C0.64 0 0 0.57 0 1.98V6.51C0 7.93 0.64 8.49 2.23 8.49H6.27C7.86 8.5 8.5 7.93 8.5 6.52Z" fill="black"></path>
                <path d="M8.5 17.77V13.73C8.5 12.14 7.86 11.5 6.27 11.5H2.23C0.64 11.5 0 12.14 0 13.73V17.77C0 19.36 0.64 20 2.23 20H6.27C7.86 20 8.5 19.36 8.5 17.77Z" fill="black"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/4 px-4 mb-12 lg:mb-0">
          <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Category</h4>
              <ul>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Lorem ipsum dolor sit</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Sed dignissim enim</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Duis nunc diam</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Morbi id purus</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Duis quam lacus</a></li>
                <li><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Vestibulum magna</a></li>
              </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Color</h4>
              <div class="flex flex-wrap -mb-2">
                <button class="inline-block w-6 h-6 bg-emerald-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-green-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-indigo-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-orange-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-red-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-blue-500 rounded-full border border-white hover:border-black"></button>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Delivery method</h4>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Lorem ipsum dolor sit</label>
              </div>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Duis nunc diam</label>
              </div>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Morbi id purus</label>
              </div>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Duis quam lacus</label>
              </div>
              <div class="flex items-center">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Vestibulum magna</label>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Price</h4>
              <div class="relative h-4 mb-2">
                <div class="absolute top-1/2 left-0 w-full h-1 transform -translate-y-1/2">
                  <div class="h-1/2 w-full bg-black"></div>
                </div>
                <input class="relative w-full bg-transparent appearance-none cursor-pointer" id="rangeInput1" x-model="price" type="range" min="10" max="500">
              </div>
              <div class="flex items-center justify-between mb-8">
                <span x-text="'$' + price" class="font-medium">$250</span>
                <span class="font-medium" id="numberRange"></span>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-3">Size</h4>
              <div class="flex flex-wrap -mx-1 -mb-1">
                <div class="p-1">
                  <button x-ref="size1" x-on:click="size = $refs.size1.textContent" :class="{ 'bg-green-500': size == $refs.size1.textContent, 'bg-transparent': size != $refs.size1.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold bg-green-500 border-2 border-black hover:bg-green-500 rounded-md">38</button>
                </div>
                <div class="p-1">
                  <button x-ref="size2" x-on:click="size = $refs.size2.textContent" :class="{ 'bg-green-500': size == $refs.size2.textContent, 'bg-transparent': size != $refs.size2.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">39</button>
                </div>
                <div class="p-1">
                  <button x-ref="size3" x-on:click="size = $refs.size3.textContent" :class="{ 'bg-green-500': size == $refs.size3.textContent, 'bg-transparent': size != $refs.size3.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">40</button>
                </div>
                <div class="p-1">
                  <button x-ref="size4" x-on:click="size = $refs.size4.textContent" :class="{ 'bg-green-500': size == $refs.size4.textContent, 'bg-transparent': size != $refs.size4.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">41</button>
                </div>
                <div class="p-1">
                  <button x-ref="size5" x-on:click="size = $refs.size5.textContent" :class="{ 'bg-green-500': size == $refs.size5.textContent, 'bg-transparent': size != $refs.size5.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">42</button>
                </div>
                <div class="p-1">
                  <button x-ref="size6" x-on:click="size = $refs.size6.textContent" :class="{ 'bg-green-500': size == $refs.size6.textContent, 'bg-transparent': size != $refs.size6.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">43</button>
                </div>
                <div class="p-1">
                  <button x-ref="size7" x-on:click="size = $refs.size7.textContent" :class="{ 'bg-green-500': size == $refs.size7.textContent, 'bg-transparent': size != $refs.size7.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">44</button>
                </div>
                <div class="p-1">
                  <button x-ref="size8" x-on:click="size = $refs.size8.textContent" :class="{ 'bg-green-500': size == $refs.size8.textContent, 'bg-transparent': size != $refs.size8.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">45</button>
                </div>
                <div class="p-1">
                  <button x-ref="size9" x-on:click="size = $refs.size9.textContent" :class="{ 'bg-green-500': size == $refs.size9.textContent, 'bg-transparent': size != $refs.size9.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">46</button>
                </div>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Localization</h4>
              <input class="h-12 w-full px-4 py-2 mb-4 text-sm focus:outline-indigo placeholder-black font-bold border-2 border-black rounded-md" type="text" placeholder="City">
              <div class="group relative h-12 border-2 border-black rounded-md overflow-hidden">
                <select class="w-full h-full px-4 text-sm font-bold appearance-none outline-none" name="" id="">
                  <option value="1">Region</option>
                  <option value="1">South</option>
                  <option value="1">North</option>
                </select>
                <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-black group-hover:text-indigo-500">
                  <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-3/4 px-4">
          <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square3.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square4.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square5.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square6.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square2.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square3.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square4.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square5.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square6.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8 hidden" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4, 'hidden': !showContent }">
                <a class="group block text-center" href="#">
                  <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                    <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                  </div>
                  <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                  <span class="text-sm font-bold text-green-500">$ 199.00</span>
                </a>
              </div>
              <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8 hidden" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4, 'hidden': !showContent }">
                <a class="group block text-center" href="#">
                  <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                    <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                  </div>
                  <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                  <span class="text-sm font-bold text-green-500">$ 199.00</span>
                </a>
              </div>
              <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8 hidden" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4, 'hidden': !showContent }">
                <a class="group block text-center" href="#">
                  <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                    <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square3.png" alt="">
                  </div>
                  <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                  <span class="text-sm font-bold text-green-500">$ 199.00</span>
                </a>
              </div>
          </div>
          <div class="mt-6 text-center">
            <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="group relative inline-block h-12 w-full xs:w-64 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-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Show more</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 md:py-36 bg-gray-50" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center">Categories</h2>
        <p class="mb-24 text-xl text-gray-500 font-medium leading-relaxed text-center">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt</p>
        <div class="flex flex-wrap -m-5">
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-blue-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Time tracker</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-pink-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/notebook.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Timesheets &amp; reports</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-orange-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/stopwatch.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Real-time active timers</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Online invoicing</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Task comments</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Client profitability</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Online meeting</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Jobs</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Support</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-18">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
        </div>
    </div>
</section>

<section class="pt-6 pb-24 px-6">
    <div class="flex flex-wrap -m-4 mb-20">
        <div class="w-full lg:w-7/12 p-4">
            <div class="flex items-end gap-6">
                <div>
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-lg mb-4 border-2 border-transparent group-hover:border-gray-800 transition duration-200" style="width:125px;height:115px;">
                            <img class="absolute inset-0 rounded-lg w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/details-product/product-details1.png" alt="">
                        </div>
                    </a>
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-lg mb-4 border border-gray-800 transition duration-200" style="width:125px;height:115px;">
                            <img class="absolute inset-0 rounded-lg w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/details-product/product-details2.png" alt="">
                        </div>
                    </a>
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-lg mb-6 border-2 border-transparent group-hover:border-gray-800 transition duration-200" style="width:125px;height:115px;">
                            <img class="absolute inset-0 rounded-lg w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/details-product/product-details3.png" alt="">
                        </div>
                    </a>
                    <a href="#" class="bg-white mb-4 mx-auto border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-14 h-14 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="34" viewBox="0 0 35 34" fill="none">
                            <path d="M17.467 16.0937L22.3489 20.6461C22.6072 20.8856 22.9498 21.0131 23.3018 21.0008C23.6538 20.9885 23.9867 20.8374 24.2277 20.5805C24.3483 20.4523 24.4423 20.3015 24.5042 20.1367C24.5662 19.972 24.595 19.7966 24.5888 19.6207C24.5827 19.4448 24.5418 19.2718 24.4685 19.1118C24.3951 18.9518 24.2909 18.8079 24.1616 18.6884L18.3144 13.2358C18.1862 13.1152 18.0354 13.0212 17.8706 12.9592C17.7059 12.8973 17.5305 12.8685 17.3546 12.8746C17.1787 12.8808 17.0057 12.9217 16.8457 12.995C16.6857 13.0683 16.5418 13.1726 16.4223 13.3018L10.903 19.1514C10.7839 19.2802 10.6913 19.4313 10.6307 19.5959C10.5701 19.7606 10.5425 19.9356 10.5497 20.1109C10.5548 20.2863 10.5944 20.459 10.6664 20.6191C10.7384 20.7791 10.8413 20.9233 10.9691 21.0435C11.2275 21.283 11.57 21.4105 11.9221 21.3982C12.2741 21.3859 12.607 21.2348 12.848 20.9779L17.467 16.0937Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="bg-white mb-4 mx-auto border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-14 h-14 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none">
                            <path d="M16.4998 16.9466L11.7798 12.2266C11.53 11.9783 11.192 11.8389 10.8398 11.8389C10.4875 11.8389 10.1496 11.9783 9.89977 12.2266C9.7748 12.3506 9.6756 12.498 9.60791 12.6605C9.54022 12.823 9.50537 12.9973 9.50537 13.1733C9.50537 13.3493 9.54022 13.5236 9.60791 13.6861C9.6756 13.8485 9.7748 13.996 9.89977 14.12L15.5531 19.7733C15.6771 19.8983 15.8245 19.9975 15.987 20.0652C16.1495 20.1328 16.3238 20.1677 16.4998 20.1677C16.6758 20.1677 16.8501 20.1328 17.0125 20.0652C17.175 19.9975 17.3225 19.8983 17.4464 19.7733L23.1664 14.12C23.29 13.9954 23.3878 13.8476 23.4541 13.6852C23.5205 13.5227 23.5541 13.3488 23.5531 13.1733C23.5541 12.9978 23.5205 12.8239 23.4541 12.6614C23.3878 12.499 23.29 12.3512 23.1664 12.2266C22.9166 11.9783 22.5787 11.8389 22.2264 11.8389C21.8742 11.8389 21.5363 11.9783 21.2864 12.2266L16.4998 16.9466Z" fill="black"></path>
                        </svg>
                    </a>
                </div>
                <a href="#" class="group flex-1">
                    <div class="relative overflow-hidden rounded-xl transition duration-200" style="height:800px;">
                        <img class="absolute inset-0 rounded-xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product2.png" alt="">
                    </div>
                </a>
            </div>
        </div>
        <div class="w-full lg:w-5/12 p-4">
            <div class="p-5 md:p-10">
                <h2 class="font-heading uppercase text-3xl mb-8 max-w-md">These soft maroon clothes are not only stylish, but also incredibly comfortable to wear for all skin types</h2>
                <p class="text-gray-500 text-xl font-semibold mb-8 max-w-lg">Upgrade Your Wardrobe with These Soft Maroon Clothes that are Equally Stylish and Comfortable for People of All Skin Tones"</p>
                <div class="flex flex-wrap items-center gap-2 mb-8">
                    <div class="flex gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                    </div>
                    <span class="text-sm font-semibold">5.0 (7.932 reviews)</span>
                </div>
                <h2 class="font-heading text-4xl mb-8">$ 128.21</h2>
                <p class="font-semibold mb-4">Select Size</p>
                <div class="flex flex-wrap gap-6 items-center mb-8">
                    <div class="flex flex-wrap gap-4">
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">XS</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">S</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">M</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">L</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">XL</a>
                    </div>
                    <a href="#" class="text-sm hover:underline">Size Guide</a>
                </div>
                <p class="font-semibold mb-4">Colors Available</p>
                <div class="flex flex-wrap gap-4 mb-14">
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#85C851"></circle>
                        </svg>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#FFB11A"></circle>
                        </svg>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#35384C"></circle>
                        </svg>
                    </a>
                    <a href="#">
                        <div class="rounded-full bg-red-700 border border-gray-100 w-12 h-12 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M18.7104 7.21001C18.6175 7.11628 18.5069 7.04189 18.385 6.99112C18.2632 6.94035 18.1324 6.91422 18.0004 6.91422C17.8684 6.91422 17.7377 6.94035 17.6159 6.99112C17.494 7.04189 17.3834 7.11628 17.2904 7.21001L9.84044 14.67L6.71044 11.53C6.61392 11.4368 6.49998 11.3635 6.37512 11.3143C6.25026 11.2651 6.11694 11.2409 5.98276 11.2432C5.84858 11.2456 5.71617 11.2743 5.59309 11.3278C5.47001 11.3813 5.35868 11.4585 5.26544 11.555C5.1722 11.6515 5.09889 11.7655 5.04968 11.8903C5.00048 12.0152 4.97635 12.1485 4.97867 12.2827C4.98099 12.4169 5.00972 12.5493 5.06321 12.6724C5.1167 12.7954 5.19392 12.9068 5.29044 13L9.13044 16.84C9.2234 16.9337 9.334 17.0081 9.45586 17.0589C9.57772 17.1097 9.70843 17.1358 9.84044 17.1358C9.97245 17.1358 10.1032 17.1097 10.225 17.0589C10.3469 17.0081 10.4575 16.9337 10.5504 16.84L18.7104 8.68001C18.8119 8.58637 18.893 8.47272 18.9484 8.34622C19.0038 8.21972 19.0324 8.08312 19.0324 7.94501C19.0324 7.80691 19.0038 7.67031 18.9484 7.54381C18.893 7.41731 18.8119 7.30366 18.7104 7.21001Z" fill="white"></path>
                            </svg>
                        </div>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#2E8DFF"></circle>
                        </svg>
                    </a>
                </div>
                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white font-semibold h-14 w-full px-7 py-4 flex items-center justify-center gap-2 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                        <path d="M21.6479 16H7.64795C7.38273 16 7.12838 15.8946 6.94084 15.7071C6.75331 15.5196 6.64795 15.2652 6.64795 15C6.64795 14.7348 6.75331 14.4804 6.94084 14.2929C7.12838 14.1054 7.38273 14 7.64795 14H18.0879C18.7566 14 19.4061 13.7767 19.9333 13.3654C20.4605 12.9542 20.8352 12.3786 20.9979 11.73L22.6479 5.24C22.6854 5.09241 22.6887 4.93821 22.6575 4.78917C22.6263 4.64013 22.5614 4.50018 22.4679 4.38C22.3707 4.25673 22.2458 4.1581 22.1033 4.09208C21.9609 4.02606 21.8049 3.99452 21.6479 4H7.40795C7.20164 3.41645 6.81988 2.911 6.31501 2.55294C5.81015 2.19488 5.20689 2.00174 4.58795 2H3.64795C3.38273 2 3.12838 2.10536 2.94084 2.29289C2.75331 2.48043 2.64795 2.73478 2.64795 3C2.64795 3.26522 2.75331 3.51957 2.94084 3.70711C3.12838 3.89464 3.38273 4 3.64795 4H4.58795C4.81638 3.99334 5.04021 4.06513 5.22215 4.20341C5.4041 4.34169 5.5332 4.53812 5.58795 4.76L5.64795 5.24L7.37795 12C6.5823 12.0358 5.83346 12.3862 5.29617 12.9741C4.75888 13.5621 4.47714 14.3394 4.51295 15.135C4.54875 15.9306 4.89916 16.6795 5.48709 17.2168C6.07501 17.7541 6.8523 18.0358 7.64795 18H7.82795C7.66348 18.4531 7.61064 18.9392 7.67388 19.4171C7.73712 19.895 7.9146 20.3506 8.19127 20.7454C8.46794 21.1401 8.83566 21.4624 9.2633 21.6849C9.69094 21.9074 10.1659 22.0235 10.6479 22.0235C11.13 22.0235 11.605 21.9074 12.0326 21.6849C12.4602 21.4624 12.828 21.1401 13.1046 20.7454C13.3813 20.3506 13.5588 19.895 13.622 19.4171C13.6853 18.9392 13.6324 18.4531 13.4679 18H15.8279C15.6635 18.4531 15.6106 18.9392 15.6739 19.4171C15.7371 19.895 15.9146 20.3506 16.1913 20.7454C16.4679 21.1401 16.8357 21.4624 17.2633 21.6849C17.6909 21.9074 18.1659 22.0235 18.6479 22.0235C19.13 22.0235 19.605 21.9074 20.0326 21.6849C20.4602 21.4624 20.828 21.1401 21.1046 20.7454C21.3813 20.3506 21.5588 19.895 21.622 19.4171C21.6853 18.9392 21.6324 18.4531 21.4679 18H21.6479C21.9132 18 22.1675 17.8946 22.3551 17.7071C22.5426 17.5196 22.6479 17.2652 22.6479 17C22.6479 16.7348 22.5426 16.4804 22.3551 16.2929C22.1675 16.1054 21.9132 16 21.6479 16ZM20.3679 6L19.0579 11.24C19.0032 11.4619 18.8741 11.6583 18.6922 11.7966C18.5102 11.9349 18.2864 12.0067 18.0579 12H9.42795L7.92795 6H20.3679ZM10.6479 20C10.4502 20 10.2568 19.9414 10.0924 19.8315C9.92793 19.7216 9.79976 19.5654 9.72407 19.3827C9.64838 19.2 9.62858 18.9989 9.66716 18.8049C9.70575 18.6109 9.80099 18.4327 9.94084 18.2929C10.0807 18.153 10.2589 18.0578 10.4529 18.0192C10.6468 17.9806 10.8479 18.0004 11.0306 18.0761C11.2134 18.1518 11.3695 18.28 11.4794 18.4444C11.5893 18.6089 11.6479 18.8022 11.6479 19C11.6479 19.2652 11.5426 19.5196 11.3551 19.7071C11.1675 19.8946 10.9132 20 10.6479 20ZM18.6479 20C18.4502 20 18.2568 19.9414 18.0924 19.8315C17.9279 19.7216 17.7998 19.5654 17.7241 19.3827C17.6484 19.2 17.6286 18.9989 17.6672 18.8049C17.7057 18.6109 17.801 18.4327 17.9408 18.2929C18.0807 18.153 18.2589 18.0578 18.4529 18.0192C18.6468 17.9806 18.8479 18.0004 19.0306 18.0761C19.2134 18.1518 19.3695 18.28 19.4794 18.4444C19.5893 18.6089 19.6479 18.8022 19.6479 19C19.6479 19.2652 19.5426 19.5196 19.3551 19.7071C19.1675 19.8946 18.9132 20 18.6479 20Z" fill="#F0FDF4"></path>
                    </svg>
                    <span>Add To Cart</span>
                </a>
            </div>
        </div>
    </div>
    <h2 class="font-heading uppercase text-4xl mb-6">Recently Added</h2>
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="group">
                <div class="relative overflow-hidden rounded-xl mb-6" style="height:530px;">
                    <a href="#">
                        <img class="rounded-xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/display-product/product3.png" alt="">
                    </a>
                    <div class="absolute top-4 left-4 right-4">
                        <div class="flex justify-between flex-wrap gap-4">
                            <div class="flex flex-wrap gap-2">
                                <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold">New arrival</span>
                                <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold text-red-600">30% OFF</span>
                            </div>
                            <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-10 h-10 flex items-center justify-center transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.1603 5.00004C19.1002 3.93725 17.6951 3.28858 16.1986 3.17121C14.7021 3.05384 13.213 3.47551 12.0003 4.36004C10.7279 3.41368 9.14427 2.98455 7.5682 3.15908C5.99212 3.33361 4.54072 4.09882 3.50625 5.30063C2.47178 6.50244 1.9311 8.05156 1.99308 9.63606C2.05506 11.2206 2.71509 12.7227 3.84028 13.84L10.0503 20.06C10.5703 20.5718 11.2707 20.8587 12.0003 20.8587C12.7299 20.8587 13.4303 20.5718 13.9503 20.06L20.1603 13.84C21.3279 12.6653 21.9832 11.0763 21.9832 9.42004C21.9832 7.76377 21.3279 6.17478 20.1603 5.00004ZM18.7503 12.46L12.5403 18.67C12.4696 18.7414 12.3855 18.798 12.2928 18.8367C12.2001 18.8753 12.1007 18.8953 12.0003 18.8953C11.8999 18.8953 11.8004 18.8753 11.7077 18.8367C11.615 18.798 11.5309 18.7414 11.4603 18.67L5.25028 12.43C4.46603 11.6284 4.02689 10.5515 4.02689 9.43004C4.02689 8.30858 4.46603 7.2317 5.25028 6.43004C6.04943 5.64103 7.12725 5.19861 8.25028 5.19861C9.3733 5.19861 10.4511 5.64103 11.2503 6.43004C11.3432 6.52377 11.4538 6.59817 11.5757 6.64893C11.6976 6.6997 11.8283 6.72584 11.9603 6.72584C12.0923 6.72584 12.223 6.6997 12.3449 6.64893C12.4667 6.59817 12.5773 6.52377 12.6703 6.43004C13.4694 5.64103 14.5472 5.19861 15.6703 5.19861C16.7933 5.19861 17.8711 5.64103 18.6703 6.43004C19.4653 7.22119 19.9189 8.29223 19.9338 9.41373C19.9488 10.5352 19.5239 11.618 18.7503 12.43V12.46Z" fill="#D62323"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <h2 class="font-heading uppercase text-3xl mb-3">Lorem product name dummy</h2>
                <p class="text-2xl font-semibold">$145.00</p>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="group">
                <div class="relative overflow-hidden rounded-xl mb-6" style="height:530px;">
                    <a href="#">
                        <img class="rounded-xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture2.png" alt="">
                    </a>
                    <div class="absolute top-4 left-4 right-4">
                        <div class="flex justify-between flex-wrap gap-4">
                            <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold">New arrival</span>
                            <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-10 h-10 flex items-center justify-center transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.1603 5.00004C19.1002 3.93725 17.6951 3.28858 16.1986 3.17121C14.7021 3.05384 13.213 3.47551 12.0003 4.36004C10.7279 3.41368 9.14427 2.98455 7.5682 3.15908C5.99212 3.33361 4.54072 4.09882 3.50625 5.30063C2.47178 6.50244 1.9311 8.05156 1.99308 9.63606C2.05506 11.2206 2.71509 12.7227 3.84028 13.84L10.0503 20.06C10.5703 20.5718 11.2707 20.8587 12.0003 20.8587C12.7299 20.8587 13.4303 20.5718 13.9503 20.06L20.1603 13.84C21.3279 12.6653 21.9832 11.0763 21.9832 9.42004C21.9832 7.76377 21.3279 6.17478 20.1603 5.00004ZM18.7503 12.46L12.5403 18.67C12.4696 18.7414 12.3855 18.798 12.2928 18.8367C12.2001 18.8753 12.1007 18.8953 12.0003 18.8953C11.8999 18.8953 11.8004 18.8753 11.7077 18.8367C11.615 18.798 11.5309 18.7414 11.4603 18.67L5.25028 12.43C4.46603 11.6284 4.02689 10.5515 4.02689 9.43004C4.02689 8.30858 4.46603 7.2317 5.25028 6.43004C6.04943 5.64103 7.12725 5.19861 8.25028 5.19861C9.3733 5.19861 10.4511 5.64103 11.2503 6.43004C11.3432 6.52377 11.4538 6.59817 11.5757 6.64893C11.6976 6.6997 11.8283 6.72584 11.9603 6.72584C12.0923 6.72584 12.223 6.6997 12.3449 6.64893C12.4667 6.59817 12.5773 6.52377 12.6703 6.43004C13.4694 5.64103 14.5472 5.19861 15.6703 5.19861C16.7933 5.19861 17.8711 5.64103 18.6703 6.43004C19.4653 7.22119 19.9189 8.29223 19.9338 9.41373C19.9488 10.5352 19.5239 11.618 18.7503 12.43V12.46Z" fill="#D62323"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <h2 class="font-heading uppercase text-3xl mb-3">Lorem product name dummy</h2>
                <p class="text-2xl font-semibold">$145.00</p>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="group">
                <div class="relative overflow-hidden rounded-xl mb-6" style="height:530px;">
                    <a href="#">
                        <img class="rounded-xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product5.png" alt="">
                    </a>
                    <div class="absolute top-4 left-4 right-4">
                        <div class="flex justify-between flex-wrap gap-4">
                            <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold">New arrival</span>
                            <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-10 h-10 flex items-center justify-center transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.1603 5.00004C19.1002 3.93725 17.6951 3.28858 16.1986 3.17121C14.7021 3.05384 13.213 3.47551 12.0003 4.36004C10.7279 3.41368 9.14427 2.98455 7.5682 3.15908C5.99212 3.33361 4.54072 4.09882 3.50625 5.30063C2.47178 6.50244 1.9311 8.05156 1.99308 9.63606C2.05506 11.2206 2.71509 12.7227 3.84028 13.84L10.0503 20.06C10.5703 20.5718 11.2707 20.8587 12.0003 20.8587C12.7299 20.8587 13.4303 20.5718 13.9503 20.06L20.1603 13.84C21.3279 12.6653 21.9832 11.0763 21.9832 9.42004C21.9832 7.76377 21.3279 6.17478 20.1603 5.00004ZM18.7503 12.46L12.5403 18.67C12.4696 18.7414 12.3855 18.798 12.2928 18.8367C12.2001 18.8753 12.1007 18.8953 12.0003 18.8953C11.8999 18.8953 11.8004 18.8753 11.7077 18.8367C11.615 18.798 11.5309 18.7414 11.4603 18.67L5.25028 12.43C4.46603 11.6284 4.02689 10.5515 4.02689 9.43004C4.02689 8.30858 4.46603 7.2317 5.25028 6.43004C6.04943 5.64103 7.12725 5.19861 8.25028 5.19861C9.3733 5.19861 10.4511 5.64103 11.2503 6.43004C11.3432 6.52377 11.4538 6.59817 11.5757 6.64893C11.6976 6.6997 11.8283 6.72584 11.9603 6.72584C12.0923 6.72584 12.223 6.6997 12.3449 6.64893C12.4667 6.59817 12.5773 6.52377 12.6703 6.43004C13.4694 5.64103 14.5472 5.19861 15.6703 5.19861C16.7933 5.19861 17.8711 5.64103 18.6703 6.43004C19.4653 7.22119 19.9189 8.29223 19.9338 9.41373C19.9488 10.5352 19.5239 11.618 18.7503 12.43V12.46Z" fill="#D62323"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <h2 class="font-heading uppercase text-3xl mb-3">Lorem product name dummy</h2>
                <p class="text-2xl font-semibold">$145.00</p>
            </div>
        </div>
    </div>
</section>

<section class="py-12 md:py-24 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-sm md:max-w-xl mx-auto lg:max-w-none">
      <div class="mb-16">
        <span class="text-sm font-bold text-yellow-500">Trending</span>
        <h1 class="font-heading text-4xl text-white font-bold mt-6 mb-2">The best of the best</h1>
        <p class="text-sm text-gray-400">The coolest, hottest furniture pieces.</p>
      </div>
      <div class="flex flex-wrap -mb-8 -mx-4 xl:-mx-8">
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products4.png" alt="">
            <span class="text-xs font-bold text-yellow-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products3.png" alt="">
            <span class="text-xs font-bold text-yellow-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products2.png" alt="">
            <span class="text-xs font-bold text-yellow-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products1.png" alt="">
            <span class="text-xs font-bold text-yellow-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-12 bg-white" x-data="{ size: 30, price: 400 }" x-init="size = $refs.size1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-col md:flex-row md:items-center gap-4 md:gap-0 justify-between flex-wrap mb-6">
      <div>
        <h1 class="font-heading text-rhino-700 text-2xl font-semibold">Found 420 results for</h1>
        <p class="text-rhino-300">Summer sneakers</p>
      </div>
      <div class="flex gap-4 flex-wrap">
        <select class="rounded-sm border border-coolGray-200 py-3 px-4 text-coolGray-400 text-sm outline-none">
          <option value="">
            Sort by
            Newest
          </option>
          <option value="">
            Sort by
            Limited
          </option>
          <option value="">
            Sort by
            Sale
          </option>
        </select>
        <div class="border border-gray-200 rounded-sm flex">
          <a class="flex-1 py-1 px-4 flex items-center justify-center bg-coolGray-100 hover:bg-coolGray-200 transition duration-200" href="#">
            <div class="text-coolGray-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M12.6667 0.333252H0.666667C0.489856 0.333252 0.320286 0.40349 0.195262 0.528514C0.0702379 0.653538 0 0.823108 0 0.999919V12.9999C0 13.1767 0.0702379 13.3463 0.195262 13.4713C0.320286 13.5963 0.489856 13.6666 0.666667 13.6666H12.6667C12.8435 13.6666 13.013 13.5963 13.1381 13.4713C13.2631 13.3463 13.3333 13.1767 13.3333 12.9999V0.999919C13.3333 0.823108 13.2631 0.653538 13.1381 0.528514C13.013 0.40349 12.8435 0.333252 12.6667 0.333252ZM4 12.3333H1.33333V9.66659H4V12.3333ZM4 8.33325H1.33333V5.66659H4V8.33325ZM4 4.33325H1.33333V1.66659H4V4.33325ZM8 12.3333H5.33333V9.66659H8V12.3333ZM8 8.33325H5.33333V5.66659H8V8.33325ZM8 4.33325H5.33333V1.66659H8V4.33325ZM12 12.3333H9.33333V9.66659H12V12.3333ZM12 8.33325H9.33333V5.66659H12V8.33325ZM12 4.33325H9.33333V1.66659H12V4.33325Z" fill="currentColor"></path>
              </svg>
            </div>
          </a>
          <a class="flex-1 py-1 px-4 flex items-center justify-center group hover:bg-coolGray-100 transition duration-200" href="#">
            <div class="text-coolGray-400 group-hover:text-coolGray-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M12.6667 7.66659H1.00004C0.82323 7.66659 0.65366 7.73682 0.528636 7.86185C0.403612 7.98687 0.333374 8.15644 0.333374 8.33325V12.9999C0.333374 13.1767 0.403612 13.3463 0.528636 13.4713C0.65366 13.5963 0.82323 13.6666 1.00004 13.6666H12.6667C12.8435 13.6666 13.0131 13.5963 13.1381 13.4713C13.2631 13.3463 13.3334 13.1767 13.3334 12.9999V8.33325C13.3334 8.15644 13.2631 7.98687 13.1381 7.86185C13.0131 7.73682 12.8435 7.66659 12.6667 7.66659ZM12 12.3333H1.66671V8.99992H12V12.3333ZM12.6667 0.333252H1.00004C0.82323 0.333252 0.65366 0.40349 0.528636 0.528514C0.403612 0.653538 0.333374 0.823108 0.333374 0.999919V5.66659C0.333374 5.8434 0.403612 6.01297 0.528636 6.13799C0.65366 6.26301 0.82323 6.33325 1.00004 6.33325H12.6667C12.8435 6.33325 13.0131 6.26301 13.1381 6.13799C13.2631 6.01297 13.3334 5.8434 13.3334 5.66659V0.999919C13.3334 0.823108 13.2631 0.653538 13.1381 0.528514C13.0131 0.40349 12.8435 0.333252 12.6667 0.333252ZM12 4.99992H1.66671V1.66659H12V4.99992Z" fill="currentColor"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/3 lg:w-1/4 px-4">
          <div class="py-6 border-b border-t border-coolGray-200" x-data="{ accordion: true }">
              <div class="flex justify-between items-center flex-wrap gap-4 cursor-pointer" x-on:click="accordion = !accordion">
                <p class="text-rhino-700 font-semibold">Category</p>
                <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                        <path d="M12.2725 16.1666C12.1769 16.1667 12.0822 16.1479 11.9939 16.1113C11.9055 16.0747 11.8253 16.021 11.7578 15.9533L6.21332 10.4092C6.07681 10.2727 6.00012 10.0876 6.00012 9.89454C6.00012 9.70149 6.07681 9.51635 6.21332 9.37984C6.34983 9.24333 6.53497 9.16665 6.72802 9.16665C6.92107 9.16665 7.10621 9.24334 7.24271 9.37984L12.2725 14.4092L17.3023 9.37982C17.4388 9.24332 17.6239 9.16663 17.817 9.16663C18.01 9.16663 18.1952 9.24331 18.3317 9.37982C18.4682 9.51632 18.5449 9.70147 18.5449 9.89452C18.5449 10.0876 18.4682 10.2727 18.3317 10.4092L12.7872 15.9534C12.7197 16.0211 12.6394 16.0748 12.5511 16.1114C12.4628 16.148 12.3681 16.1667 12.2725 16.1666Z" fill="#252E4A"></path>
                    </svg>
                </span>
              </div>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <ul class="text-coolGray-700 flex flex-col gap-2 mt-4">
                    <li class="hover:text-coolGray-800 transition duration-200"><a href="#">Sport shoes</a></li>
                    <li class="hover:text-coolGray-800 transition duration-200"><a href="#">Sneakers</a></li>
                    <li class="hover:text-coolGray-800 transition duration-200"><a href="#">Special edition shoes</a></li>
                    <li class="hover:text-coolGray-800 transition duration-200"><a href="#">Summer specials</a></li>
                    <li class="hover:text-coolGray-800 transition duration-200"><a href="#">Jordan series</a></li>
                  </ul>
              </div>
          </div>
        <div class="py-6 border-b border-coolGray-200" x-data="{ accordion: true }">
          <div class="flex justify-between items-center flex-wrap gap-4 cursor-pointer" x-on:click="accordion = !accordion">
            <p class="text-rhino-700 font-semibold">Color</p>
            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                    <path d="M12.2725 16.1666C12.1769 16.1667 12.0822 16.1479 11.9939 16.1113C11.9055 16.0747 11.8253 16.021 11.7578 15.9533L6.21332 10.4092C6.07681 10.2727 6.00012 10.0876 6.00012 9.89454C6.00012 9.70149 6.07681 9.51635 6.21332 9.37984C6.34983 9.24333 6.53497 9.16665 6.72802 9.16665C6.92107 9.16665 7.10621 9.24334 7.24271 9.37984L12.2725 14.4092L17.3023 9.37982C17.4388 9.24332 17.6239 9.16663 17.817 9.16663C18.01 9.16663 18.1952 9.24331 18.3317 9.37982C18.4682 9.51632 18.5449 9.70147 18.5449 9.89452C18.5449 10.0876 18.4682 10.2727 18.3317 10.4092L12.7872 15.9534C12.7197 16.0211 12.6394 16.0748 12.5511 16.1114C12.4628 16.148 12.3681 16.1667 12.2725 16.1666Z" fill="#252E4A"></path>
                </svg>
            </span>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <div class="flex flex-wrap gap-2 justify-between my-4">
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="16" fill="#E8B180"></circle></svg>
                </a>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><circle cx="16.6001" cy="16" r="15.5" fill="white" stroke="#DFDFDF"></circle></svg>
                </a>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><circle cx="16.2" cy="16" r="16" fill="black"></circle></svg>
                </a>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><circle cx="16.6001" cy="16" r="16" fill="#7573F9"></circle><circle cx="4" cy="4" r="4" transform="matrix(1 0 0 -1 12.8 20)" fill="white"></circle></svg>
                </a>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><circle cx="16.4" cy="16" r="16" fill="#FB5622"></circle></svg>
                </a>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="16" fill="#D3D6E0"></circle></svg>
                </a>
              </div>
              <a href="#">
                <div class="flex items-center gap-2 group">
                  <span class="text-purple-500 text-sm font-medium group-hover:text-purple-600 transition duration-200">Show more colors</span>
                  <div class="text-purple-500 group-hover:text-purple-600 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M10.2271 13.3333C10.1474 13.3334 10.0685 13.3178 9.99491 13.2873C9.9213 13.2568 9.85445 13.212 9.7982 13.1556L5.17778 8.53551C5.06403 8.42175 5.00012 8.26747 5.00012 8.10659C5.00012 7.94572 5.06403 7.79143 5.17779 7.67768C5.29154 7.56392 5.44583 7.50002 5.6067 7.50002C5.76758 7.50002 5.92186 7.56393 6.03562 7.67768L10.2271 11.8688L14.4186 7.67766C14.5323 7.56391 14.6866 7.5 14.8475 7.5C15.0084 7.5 15.1627 7.56391 15.2764 7.67766C15.3902 7.79142 15.4541 7.9457 15.4541 8.10658C15.4541 8.26745 15.3902 8.42173 15.2764 8.53549L10.656 13.1556C10.5997 13.212 10.5329 13.2568 10.4593 13.2873C10.3857 13.3178 10.3068 13.3334 10.2271 13.3333Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </a>
          </div>
        </div>
        <div class="py-6 border-b border-coolGray-200" x-data="{ accordion: true }">
          <div class="flex justify-between items-center flex-wrap gap-4 cursor-pointer" x-on:click="accordion = !accordion">
            <p class="text-rhino-700 font-semibold">Delivery method</p>
            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                    <path d="M12.2725 16.1666C12.1769 16.1667 12.0822 16.1479 11.9939 16.1113C11.9055 16.0747 11.8253 16.021 11.7578 15.9533L6.21332 10.4092C6.07681 10.2727 6.00012 10.0876 6.00012 9.89454C6.00012 9.70149 6.07681 9.51635 6.21332 9.37984C6.34983 9.24333 6.53497 9.16665 6.72802 9.16665C6.92107 9.16665 7.10621 9.24334 7.24271 9.37984L12.2725 14.4092L17.3023 9.37982C17.4388 9.24332 17.6239 9.16663 17.817 9.16663C18.01 9.16663 18.1952 9.24331 18.3317 9.37982C18.4682 9.51632 18.5449 9.70147 18.5449 9.89452C18.5449 10.0876 18.4682 10.2727 18.3317 10.4092L12.7872 15.9534C12.7197 16.0211 12.6394 16.0748 12.5511 16.1114C12.4628 16.148 12.3681 16.1667 12.2725 16.1666Z" fill="#252E4A"></path>
                </svg>
            </span>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <ul class="text-coolGray-700 flex flex-col gap-3 mt-4">
                <li class="flex items-center gap-2">
                  <div class="relative">
                    <input class="custom-checkbox-1 opacity-0 absolute z-10 h-5 w-5 top-0 left-0" id="checkbox1" type="checkbox">
                    <div class="border border-coolGray-200 w-5 h-5 flex justify-center items-center rounded-sm">
                      <svg class="hidden" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.76764 0.22597C9.45824 -0.0754185 8.95582 -0.0752285 8.64601 0.22597L3.59787 5.13702L1.35419 2.95437C1.04438 2.65298 0.542174 2.65298 0.23236 2.95437C-0.0774534 3.25576 -0.0774534 3.74431 0.23236 4.0457L3.03684 6.77391C3.19165 6.92451 3.39464 7 3.59765 7C3.80067 7 4.00386 6.9247 4.15867 6.77391L9.76764 1.31727C10.0775 1.01609 10.0775 0.52734 9.76764 0.22597Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <label class="text-coolGray-700" for="checkbox1">Personal collection</label>
                </li>
                <li class="flex items-center gap-2">
                  <div class="relative">
                    <input class="custom-checkbox-1 opacity-0 absolute z-10 h-5 w-5 top-0 left-0" id="checkbox2" type="checkbox">
                    <div class="border border-coolGray-200 w-5 h-5 flex justify-center items-center rounded-sm">
                      <svg class="hidden" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.76764 0.22597C9.45824 -0.0754185 8.95582 -0.0752285 8.64601 0.22597L3.59787 5.13702L1.35419 2.95437C1.04438 2.65298 0.542174 2.65298 0.23236 2.95437C-0.0774534 3.25576 -0.0774534 3.74431 0.23236 4.0457L3.03684 6.77391C3.19165 6.92451 3.39464 7 3.59765 7C3.80067 7 4.00386 6.9247 4.15867 6.77391L9.76764 1.31727C10.0775 1.01609 10.0775 0.52734 9.76764 0.22597Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <label class="text-coolGray-700" for="checkbox2">Courier delivery</label>
                </li>
                <li class="flex items-center gap-2">
                  <div class="relative">
                    <input class="custom-checkbox-1 opacity-0 absolute z-10 h-5 w-5 top-0 left-0" id="checkbox3" type="checkbox">
                    <div class="border border-coolGray-200 w-5 h-5 flex justify-center items-center rounded-sm">
                      <svg class="hidden" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.76764 0.22597C9.45824 -0.0754185 8.95582 -0.0752285 8.64601 0.22597L3.59787 5.13702L1.35419 2.95437C1.04438 2.65298 0.542174 2.65298 0.23236 2.95437C-0.0774534 3.25576 -0.0774534 3.74431 0.23236 4.0457L3.03684 6.77391C3.19165 6.92451 3.39464 7 3.59765 7C3.80067 7 4.00386 6.9247 4.15867 6.77391L9.76764 1.31727C10.0775 1.01609 10.0775 0.52734 9.76764 0.22597Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <label class="text-coolGray-700" for="checkbox3">Pickup at the point</label>
                </li>
                <li class="flex items-center gap-2">
                  <div class="relative">
                    <input class="custom-checkbox-1 opacity-0 absolute z-10 h-5 w-5 top-0 left-0" id="checkbox4" type="checkbox">
                    <div class="border border-coolGray-200 w-5 h-5 flex justify-center items-center rounded-sm">
                      <svg class="hidden" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.76764 0.22597C9.45824 -0.0754185 8.95582 -0.0752285 8.64601 0.22597L3.59787 5.13702L1.35419 2.95437C1.04438 2.65298 0.542174 2.65298 0.23236 2.95437C-0.0774534 3.25576 -0.0774534 3.74431 0.23236 4.0457L3.03684 6.77391C3.19165 6.92451 3.39464 7 3.59765 7C3.80067 7 4.00386 6.9247 4.15867 6.77391L9.76764 1.31727C10.0775 1.01609 10.0775 0.52734 9.76764 0.22597Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <label class="text-coolGray-700" for="checkbox4">Delivery abroad</label>
                </li>
                <li class="flex items-center gap-2">
                  <div class="relative">
                    <input class="custom-checkbox-1 opacity-0 absolute z-10 h-5 w-5 top-0 left-0" id="checkbox5" type="checkbox">
                    <div class="border border-coolGray-200 w-5 h-5 flex justify-center items-center rounded-sm">
                      <svg class="hidden" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.76764 0.22597C9.45824 -0.0754185 8.95582 -0.0752285 8.64601 0.22597L3.59787 5.13702L1.35419 2.95437C1.04438 2.65298 0.542174 2.65298 0.23236 2.95437C-0.0774534 3.25576 -0.0774534 3.74431 0.23236 4.0457L3.03684 6.77391C3.19165 6.92451 3.39464 7 3.59765 7C3.80067 7 4.00386 6.9247 4.15867 6.77391L9.76764 1.31727C10.0775 1.01609 10.0775 0.52734 9.76764 0.22597Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <label class="text-coolGray-700" for="checkbox5">Package</label>
                </li>
              </ul>
          </div>
        </div>
        <div class="py-6 border-b border-coolGray-200" x-data="{ accordion: true }">
          <div class="flex justify-between items-center flex-wrap gap-4 cursor-pointer" x-on:click="accordion = !accordion">
            <p class="text-rhino-700 font-semibold">Size</p>
            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                    <path d="M12.2725 16.1666C12.1769 16.1667 12.0822 16.1479 11.9939 16.1113C11.9055 16.0747 11.8253 16.021 11.7578 15.9533L6.21332 10.4092C6.07681 10.2727 6.00012 10.0876 6.00012 9.89454C6.00012 9.70149 6.07681 9.51635 6.21332 9.37984C6.34983 9.24333 6.53497 9.16665 6.72802 9.16665C6.92107 9.16665 7.10621 9.24334 7.24271 9.37984L12.2725 14.4092L17.3023 9.37982C17.4388 9.24332 17.6239 9.16663 17.817 9.16663C18.01 9.16663 18.1952 9.24331 18.3317 9.37982C18.4682 9.51632 18.5449 9.70147 18.5449 9.89452C18.5449 10.0876 18.4682 10.2727 18.3317 10.4092L12.7872 15.9534C12.7197 16.0211 12.6394 16.0748 12.5511 16.1114C12.4628 16.148 12.3681 16.1667 12.2725 16.1666Z" fill="#252E4A"></path>
                </svg>
            </span>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <div class="flex flex-wrap mt-4">
                <div class="w-1/4 p-2">
                  <div x-ref="size1" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-purple-500 text-purple-700" :class="{'border-purple-500 text-purple-700': $refs.size1.textContent == size, 'border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700': $refs.size1.textContent != size}" x-on:click="size = $refs.size1.textContent">30</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size2" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size2.textContent == size }" x-on:click="size = $refs.size2.textContent">40</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size3" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size3.textContent == size }" x-on:click="size = $refs.size3.textContent">41</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size4" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size4.textContent == size }" x-on:click="size = $refs.size4.textContent">42</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size5" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size5.textContent == size }" x-on:click="size = $refs.size5.textContent">43</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size6" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size6.textContent == size }" x-on:click="size = $refs.size6.textContent">44</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size7" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size7.textContent == size }" x-on:click="size = $refs.size7.textContent">45</div>
                </div>
                <div class="w-1/4 p-2">
                  <div x-ref="size8" class="flex items-center justify-center border py-3 px-5 rounded-sm text-center text-sm cursor-pointer transition duration-200 border-coolGray-200 hover:border-purple-500 hover:text-purple-700 text-coolGray-700" :class="{'border-purple-500 text-purple-700': $refs.size8.textContent == size }" x-on:click="size = $refs.size8.textContent">46</div>
                </div>
              </div>
          </div>
        </div>
        <div class="py-6 border-b border-coolGray-200" x-data="{ accordion: true }">
          <div class="flex justify-between items-center flex-wrap gap-4 cursor-pointer" x-on:click="accordion = !accordion">
            <p class="text-rhino-700 font-semibold">Localization</p>
            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                    <path d="M12.2725 16.1666C12.1769 16.1667 12.0822 16.1479 11.9939 16.1113C11.9055 16.0747 11.8253 16.021 11.7578 15.9533L6.21332 10.4092C6.07681 10.2727 6.00012 10.0876 6.00012 9.89454C6.00012 9.70149 6.07681 9.51635 6.21332 9.37984C6.34983 9.24333 6.53497 9.16665 6.72802 9.16665C6.92107 9.16665 7.10621 9.24334 7.24271 9.37984L12.2725 14.4092L17.3023 9.37982C17.4388 9.24332 17.6239 9.16663 17.817 9.16663C18.01 9.16663 18.1952 9.24331 18.3317 9.37982C18.4682 9.51632 18.5449 9.70147 18.5449 9.89452C18.5449 10.0876 18.4682 10.2727 18.3317 10.4092L12.7872 15.9534C12.7197 16.0211 12.6394 16.0748 12.5511 16.1114C12.4628 16.148 12.3681 16.1667 12.2725 16.1666Z" fill="#252E4A"></path>
                </svg>
            </span>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <div class="my-4">
                <label class="block text-coolGray-700 text-sm font-medium mb-2" for="textInput1">City</label>
                <input class="w-full py-3 px-4 rounded-sm border border-coolGray-200 outline-none" id="textInput1" type="text">
              </div>
              <label class="block text-coolGray-700 text-sm font-medium mb-2" for="select1">Region</label>
              <select class="w-full rounded-sm border border-coolGray-200 py-3 px-4 text-coolGray-700 text-sm outline-none" id="select1">
                <option value="">Region 1</option>
                <option value="">Region 2</option>
                <option value="">Region 3</option>
              </select>
          </div>
        </div>
        <div class="py-6" x-data="{ accordion: true }">
          <div class="flex justify-between items-center flex-wrap gap-4 cursor-pointer" x-on:click="accordion = !accordion">
            <p class="text-rhino-700 font-semibold">Price</p>
            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                    <path d="M12.2725 16.1666C12.1769 16.1667 12.0822 16.1479 11.9939 16.1113C11.9055 16.0747 11.8253 16.021 11.7578 15.9533L6.21332 10.4092C6.07681 10.2727 6.00012 10.0876 6.00012 9.89454C6.00012 9.70149 6.07681 9.51635 6.21332 9.37984C6.34983 9.24333 6.53497 9.16665 6.72802 9.16665C6.92107 9.16665 7.10621 9.24334 7.24271 9.37984L12.2725 14.4092L17.3023 9.37982C17.4388 9.24332 17.6239 9.16663 17.817 9.16663C18.01 9.16663 18.1952 9.24331 18.3317 9.37982C18.4682 9.51632 18.5449 9.70147 18.5449 9.89452C18.5449 10.0876 18.4682 10.2727 18.3317 10.4092L12.7872 15.9534C12.7197 16.0211 12.6394 16.0748 12.5511 16.1114C12.4628 16.148 12.3681 16.1667 12.2725 16.1666Z" fill="#252E4A"></path>
                </svg>
            </span>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <input class="custom-range-1 w-full mt-8" type="range" max="798" min="0" x-model="price">
              <div class="flex items-center justify-between flex-wrap gap-2">
                <p x-text="'$' + price" class="text-coolGray-700 text-sm font-medium">400$</p>
                <p class="text-coolGray-700 text-sm font-medium">$798</p>
              </div>
          </div>
        </div>
      </div>
      <div class="pb-8 w-full md:w-2/3 lg:w-3/4 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-orange-500 py-1 px-3 rounded-full text-white text-xs font-bold text-center">New</div>
                <img src="coleos-assets/product-list/product1.png" alt="">
              </div>
              <p class="text-rhino-700">Nike Sport Shoes V2.04</p>
              <p class="text-rhino-300">$ 199.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-rhino-600 py-1 px-3 rounded-full text-white text-xs font-bold text-center">Limited</div>
                <img src="coleos-assets/product-list/product2.png" alt="">
              </div>
              <p class="text-rhino-700">White Label Cap</p>
              <p class="text-rhino-300">$ 48.99</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-white py-1 px-3 rounded-full text-rhino-700 text-xs font-bold text-center">Sale</div>
                <img src="coleos-assets/product-list/product3.png" alt="">
              </div>
              <p class="text-rhino-700">Nike Sport Shoes V2.04</p>
              <p class="text-rhino-300">$ 199.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <img src="coleos-assets/product-list/product4.png" alt="">
              </div>
              <p class="text-rhino-700">Summer Slim Shorts</p>
              <p class="text-rhino-300">$ 79.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <img src="coleos-assets/product-list/product5.png" alt="">
              </div>
              <p class="text-rhino-700">Nike Sport Shoes V2.04</p>
              <p class="text-rhino-300">$ 199.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-orange-500 py-1 px-3 rounded-full text-white text-xs font-bold text-center">New</div>
                <img src="coleos-assets/product-list/product6.png" alt="">
              </div>
              <p class="text-rhino-700">Brown Original 64’s Jacket</p>
              <p class="text-rhino-300">$ 249.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <img src="coleos-assets/product-list/product7.png" alt="">
              </div>
              <p class="text-rhino-700">Set of colorful t-shirts</p>
              <p class="text-rhino-300">$ 98.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-orange-500 py-1 px-3 rounded-full text-white text-xs font-bold text-center">New</div>
                <img src="coleos-assets/product-list/product8.png" alt="">
              </div>
              <p class="text-rhino-700">Blue High School Hoodie</p>
              <p class="text-rhino-300">$ 65.90</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-white py-1 px-3 rounded-full text-rhino-700 text-xs font-bold text-center">Sale</div>
                <img src="coleos-assets/product-list/product9.png" alt="">
              </div>
              <p class="text-rhino-700">BlackSeries Nike SuperSport</p>
              <p class="text-rhino-300">$ 319.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <img src="coleos-assets/product-list/product10.png" alt="">
              </div>
              <p class="text-rhino-700">Nike Sport Shoes V2.04</p>
              <p class="text-rhino-300">$ 199.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <img src="coleos-assets/product-list/product11.png" alt="">
              </div>
              <p class="text-rhino-700">TriBlend Crew T-Shirt</p>
              <p class="text-rhino-300">$ 199.00</p>
            </a>
          </div>
          <div class="w-full xs:w-1/2 lg:w-1/3 px-4">
            <a class="block mb-10 group" href="#">
              <div class="w-full h-64 bg-coolGray-100 rounded-xl mb-3 flex items-center justify-center relative flex-1 p-6 border-2 border-transparent group-hover:border-purple-500 transition duration-150">
                <div class="absolute left-5 top-5 uppercase bg-orange-500 py-1 px-3 rounded-full text-white text-xs font-bold text-center">New</div>
                <img src="coleos-assets/product-list/product12.png" alt="">
              </div>
              <p class="text-rhino-700">Nike Sport Shoes V2.04</p>
              <p class="text-rhino-300">$ 199.00</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>