E-Commerce (Products) Components in Yofte library

<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="section has-background-light is-clipped">
  <div class="container">
    <div class="mb-20 columns is-vcentered is-multiline is-justify-content-space-between">
      <div class="column is-12-touch is-6-desktop mb-12 mb-0-widescreen">
        <h2 class="title">
          <span>Found 125 results for</span>
          <a class="has-text-info" href="#">Sports</a>
        </h2>
      </div>
      <div class="column is-narrow">
        <div class="columns is-multiline is-align-items-end">
          <div class="column is-narrow">
            <div class="select">
              <select name="">
                <option value="1">Sort by newest</option>
                <option value="2">Sort by price</option>
                <option value="3">Sort by most popular</option>
              </select>
            </div>
          </div>
          <div class="column is-narrow">
            <a class="button p-6 mr-2 has-background-white" href="#" style="height: 100%">
              <svg width="20" height="24" viewbox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="8" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="16" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect y="10" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect y="20" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="#2B51C6"></rect></svg>
            </a>
            <a class="button p-6" href="#" style="height: 100%">
              <svg width="28" height="24" viewbox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" y="20" width="4" height="4" rx="2" fill="currentColor"></rect></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-20 columns is-multiline">
      <div class="column is-12-touch is-3-desktop px-3">
        <div class="columns is-mobile is-multiline">
          <div class="column is-6-touch is-12-desktop">
            <div class="mb-2 px-6-touch px-12-desktop py-10 has-background-white">
              <a href="#">
                <h3 class="mb-0-touch mb-8-desktop title is-size-4 is-size-5-touch has-text-centered-touch">Category</h3>
              </a>
              <ul class="mb-0 is-hidden-touch">
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">New in</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Activewear</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Hoodies</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Jackets</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Multipacks</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Bags</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Sports</a></li>
                <li class="mb-4"><a class="has-text-dark is-size-5" href="#">Gifts</a></li>
                <li><a class="has-text-dark is-size-5" href="#">Notes</a></li>
              </ul>
            </div>
          </div>
          <div class="column is-6-touch is-12-desktop">
            <div class="mb-2 px-6-touch px-12-desktop py-10 has-background-white">
              <a href="#">
                <h3 class="mb-0-touch mb-8-desktop title is-size-4 is-size-5-touch has-text-centered-touch">Colors</h3>
              </a>
              <div class="is-flex is-flex-wrap-wrap is-hidden-touch">
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-info is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-primary is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-primary-dark is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-danger is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-success is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-success-dark is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-warning is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
                <button class="button p-1 mb-2 mr-4 is-rounded" style="width: 34px; height: 34px;">
                  <div class="has-background-light is-rounded" style="width: 20px; height: 20px;"></div>
                </button>
              </div>
            </div>
          </div>
          <div class="column is-6-touch is-12-desktop">
            <div class="mb-2 px-6-touch px-12-desktop py-10 has-background-white">
              <a href="#">
                <h3 class="mb-0-touch mb-8-desktop title is-size-4 is-size-5-touch has-text-centered-touch">Price</h3>
              </a>
              <div class="is-hidden-touch">
                <input class="mb-4" type="range" min="1" max="100" value="50" style="height: 4px; width: 100%;">
                <div class="is-flex is-justify-content-space-between">
                  <span class="has-text-info is-inline-block is-size-6 has-text-weight-bold">$0</span>
                  <span class="has-text-info is-inline-block is-size-6 has-text-weight-bold">$289</span>
                </div>
              </div>
            </div>
          </div>
          <div class="column is-6-touch is-12-desktop">
            <div class="mb-2 px-6-touch px-12-desktop py-10 has-background-white">
              <a href="#">
                <h3 class="mb-0-touch mb-8-desktop title is-size-4 is-size-5-touch has-text-centered-touch">Size</h3>
              </a>
              <div class="is-hidden-touch">
                <div class="-mb-2">
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">36</button>
                  <button class="button mb-2 mr-1 px-0 py-1 is-relative has-text-weight-normal" style="width: 64px;">
                    37
                    <span class="pt-1 is-absolute is-bottom-0 is-left-0 has-background-info is-fullwidth"></span>
                  </button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">38</button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">39</button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">40</button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">41</button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">42</button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">43</button>
                  <button class="button mb-2 mr-1 px-0 py-1 has-text-weight-normal" style="width: 64px;">44</button>
                </div>
                <div class="mt-8 has-text-centered">
                  <a class="has-text-info" href="#">
                    <span class="mr-2">Show all</span>
                    <svg width="14" height="27" viewbox="0 0 14 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.83901 26.2775L0.151884 19.5904L0.987775 18.7545L6.66766 24.4343L6.66347 0.782814L7.84208 0.782814L7.84626 24.4343L13.1082 19.1724L13.9441 20.0083L7.6749 26.2775C7.44407 26.5083 7.06985 26.5083 6.83901 26.2775Z" fill="#3C60D9"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="column is-6-touch is-12-desktop">
            <div class="mb-2 px-6-touch px-12-desktop py-10 has-background-white">
              <a href="#">
                <h3 class="mb-0-touch mb-8-desktop title is-size-4 is-size-5-touch has-text-centered-touch">Delivery</h3>
              </a>
              <div class="is-hidden-touch">
                <label class="checkbox is-block mb-3">
                  <input class="mr-2" type="checkbox">
                  <span>Standard</span>
                </label>
                <label class="checkbox is-block">
                  <input class="mr-2" type="checkbox">
                  <span>Next day (yes!)</span>
                </label>
              </div>
            </div>
          </div>
          <div class="column is-6-touch is-12-desktop">
            <div class="px-4 px-12-desktop py-10 has-background-white">
              <a href="#">
                <h3 class="mb-0-touch mb-8-desktop title is-size-4 is-size-5-touch has-text-centered-touch">Location</h3>
              </a>
              <div class="is-hidden-touch">
                <input class="input px-8 py-4 has-background-white" type="serach" placeholder="City">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12-touch is-9-desktop px-3">
        <div class="columns is-multiline">
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">BRILE water filter</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Bicycle S20</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$129.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$133.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Nike basketball ball</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-info is-absolute is-top-0 is-left-0 ml-8 mt-8">NEW</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/skateboard.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Kiteboard WH-004</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$199.90</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/backpack.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Backpack Travel</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">BRILE water filter</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Bicycle S20</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$129.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$133.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">BRILE water filter</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Bicycle S20</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$129.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$133.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Nike basketball ball</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-info is-absolute is-top-0 is-left-0 ml-8 mt-8">NEW</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/skateboard.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Kiteboard WH-004</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$199.90</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/backpack.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Backpack Travel</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">BRILE water filter</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$33.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="pt-16 px-10 pb-10 has-background-white is-relative">
              <span class="tag is-danger is-absolute is-top-0 is-left-0 ml-8 mt-8">-15%</span>
              <a class="mb-2 is-block" href="#">
                <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="title is-size-5 mb-2 has-text-weight-bold">Bicycle S20</h3>
                <p>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$129.89</span>
                  <span class="has-text-grey is-size-7" style="text-decoration: line-through;">$133.69</span>
                </p>
              </a>
              <div class="has-text-right">
                <a class="button p-0" href="#" style="width: 48px; height: 48px;">
                  <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><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></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="has-text-centered"><a class="button is-primary" href="#">Show More</a></div>
  </div>
</section>

<section class="py-20 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 mb-md-24" >The Latest And The Greatest</h2>
    <div class="row mb-20">
      <div class="col-12 col-lg-6 mb-6 mb-lg-0">
        <div class="position-relative mb-6 w-100" style="height: 256px; background-image: url('yofte-assets/images/placeholder-snapshot.png'); background-size: cover; background-repeat: no-repeat;" ><span class="d-inline-block mt-4 ms-4 badge bg-white fw-bold text-danger border border-2 border-danger rounded-pill" >-10%</span><a class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-end link-dark text-decoration-none" href="#">
            <div class="ps-12 pb-12">
              <h4 class="text-white" >LIFE Bottle 2.0</h4>
              <p class="h6 text-white"><span >$10.30</span> <span class="small fw-normal text-decoration-line-through" >11.99</span></p>
            </div></a></div>
        <div class="position-relative w-100" style="height: 256px; background-image: url('yofte-assets/images/placeholder-playing-tennis.png'); background-size: cover; background-repeat: no-repeat;" ><span class="d-inline-block mt-4 ms-4 badge bg-white fw-bold text-danger border border-2 border-danger rounded-pill" >-10%</span><a class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-end link-dark text-decoration-none" href="#">
            <div class="ps-12 pb-12">
              <h3 class="text-white" >Tennis racket Sanks 2</h3>
              <p class="h6 text-white"><span >$126.90</span> <span class="small fw-normal text-decoration-line-through" >$139.90</span></p>
            </div></a></div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="position-relative mb-6 w-100 h-100" style="min-height: 512px; background-image: url('yofte-assets/images/placeholder-bike.png'); background-size: cover; background-repeat: no-repeat;" ><span class="d-inline-block mt-4 ms-4 badge bg-white fw-bold text-info border border-2 border-info rounded-pill text-uppercase" >New</span>
          <div class="position-absolute top-50 start-0 w-100 h-100 ms-12 link-dark text-decoration-none"><span class="h6 text-warning" >Excellent value bike</span>
            <h3 class="mt-3 mb-2 text-white" >Brooklyn Sain 1</h3>
            <p class="mb-10 fw-bold text-white"  >$379.90</p><a class="btn btn-sm btn-primary" href="#" >Buy</a>
          </div>
        </div>
      </div>
    </div><a class="btn btn-info" href="#" >All Products</a>
  </div>
</section>