Tailwind CSS Components

<section class="overflow-x-hidden">
  <div class="py-10 bg-white">
    <div class="container mx-auto px-4">
      <a class="text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
    </div>
  </div>
  <div class="relative py-20 md:py-40 bg-blue-800" style="background-image: url('yofte-assets/elements/lines-color4.svg'); background-size: cover;" alt="">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4">
          <img class="w-4/5 mx-auto object-contain" src="yofte-assets/images/placeholder-colorful.png" alt="">
        </div>
        <div class="w-full md:w-1/2 px-4 text-center md:text-left">
          <span class="font-bold font-heading text-white" style="font-size: 126px;">404</span>
          <h2 class="mt-3 mb-12 text-3xl text-white font-bold font-heading">Sorry, we can’t find that page or something has gone wrong</h2>
          <div class="flex flex-wrap items-center justify-start">
            <p class="mb-12 lg:mb-0 mr-8 w-full md:w-auto text-white text-center md:text-left">Checkout for any URL misspelling.</p>
            <a class="inline-block w-full md:w-auto text-center bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Homepage</a>
          </div>
        </div>
      </div>
    </div>

<section class="bg-no-repeat bg-cover" style="background-image: url('yofte-assets/images/placeholder-jogging.png');">
  <div class="relative p-8 pt-24 md:p-24 lg:w-2/3 ml-auto">
    <img class="hidden xl:block absolute right-0 top-0 mt-8 z-10" src="yofte-assets/elements/lines2.svg" alt="">
    <div class="absolute bottom-0 right-0 h-2/3 w-2/3 bg-white"></div>
    <div class="relative md:max-w-2xl lg:max-w-3xl lg:ml-auto bg-blue-300">
      <div class="relative z-10 p-8 md:p-24">
        <span class="mb-4 text-white text-2xl">More inspirations</span>
        <h2 class="mt-6 mb-8 md:mb-16 text-5xl text-white font-bold font-heading">Sunday: Features styles. Check it now.</h2>
        <p class="mb-8 md:mb-20 text-white">Discover more products and inspiration.</p>
        <a class="inline-block bg-orange-300 hover:bg-orange-400 font-bold font-heading py-6 px-8 rounded-md text-white uppercase transition duration-200" href="#">More</a>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Latest Blog</h2>
    <div class="flex flex-wrap xl:justify-between -mx-4" :class="{ 'mb-20': !showContent }">
      <div class="w-full lg:w-1/3 xl:max-w-sm px-4 mb-12 xl:mb-0">
        <div class="relative">
          <a class="absolute top-0 right-0 z-10 mt-64 mr-5 px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>
          <a class="group block pb-16 bg-white" href="#">
            <div class="relative h-80">
              <img class="w-full h-80 object-cover object-top" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="relative mt-12">
              <div class="absolute top-0 h-44 px-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="px-12">
                <h3 class="mb-8 text-2xl md:text-3xl font-bold font-heading">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
                <span class="text-lg font-bold font-heading text-blue-300 uppercase">15 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 xl:max-w-sm px-4 xl:mt-24 mb-12 xl:mb-0">
        <div class="relative">
          <a class="absolute top-0 right-0 z-10 mt-64 mr-5 px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="p-8 lg:p-20 bg-white">
      <h2 class="mb-8 text-4xl font-bold font-heading">Shopping Cart</h2>
      <p class="mb-10 md:mb-16 text-gray-500">Fusce pharetra lectus felis, eget temp.</p>
      <div class="mb-12 pb-12 border-b">
        <div class="flex mb-8 flex-wrap items-center justify-between">
          <div class="w-full lg:w-auto mb-8 xl:mb-0 flex flex-wrap items-center">
            <div class="flex items-center justify-center h-32 mb-4 lg:mb-0 bg-gray-100">
              <img class="h-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
            </div>
            <div class="w-full md:w-auto md:pl-4 md:pl-8">
              <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter carafe</h3>
              <p class="mb-8 text-gray-500">Maecenas 0.7 commodo sit</p>
              <p class="text-gray-500">In Stock</p>
            </div>
          </div>
          <div class="w-full lg:w-auto flex flex-wrap -mx-4 items-center">
            <div class="order-0 w-1/2 md:w-1/3 px-4 mb-4 md:mb-0">
                <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">

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto bg-blue-300">
      <div class="py-10 bg-white text-center">
        <a class="inline-block text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="relative max-w-xl mx-auto px-6 pt-20 pb-32 text-center">
        <img class="hidden md:block absolute top-0 -right-1/2 -mr-16" src="yofte-assets/elements/white-sign-line.svg" alt="">
        <img class="absolute bottom-0 -left-1/2 -ml-24" src="yofte-assets/elements/orange-sign-line.svg" alt="">
        <img class="absolute bottom-0 -right-1/2 -mb-12 -mr-40" src="yofte-assets/elements/purple-sign-line.svg" alt="">
        <h2 class="mb-20 max-w-md mx-auto text-4xl text-white font-bold font-heading">Signing up with social is super quick</h2>
        <form action="">
          <input class="w-full mb-4 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text" placeholder="steven@example.dev">
          <input class="w-full mb-4 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password" placeholder="Password">
          <input class="w-full mb-10 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password" placeholder="Repeat password">
          <label class="flex" for="">
            <input class="mr-4 mt-1" type="checkbox">
            <span class="text-sm text-blue-50">By singning up, you agree to our Terms, Data Policy and Cookies.</span>
          </label>
          <button class="mt-12 md:mt-16 bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-5 px-8 rounded-md uppercase">JOIN yofte</button>
        </form>
      </div>

<section class="py-20 overflow-x-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 md:px-8 mb-12 lg:mb-0">
        <h2 class="mb-16 text-5xl font-bold font-heading">General question</h2>
        <div class="pt-12 pb-16 pr-8 md:pr-20 w-full bg-gray-100">
          <div class="pl-8 md:pl-16 lg:pl-28 border-l-2 border-blue-300">
            <h3 class="mb-5 text-xl font-bold font-heading">Sed eget accumsan ipsum. Praesent dignissim?</h3>
            <p class="text-gray-500">Aliquam tincidunt placerat mollis. Lorem euismod dignissim, felis tortor ollis eros, non ultricies turpis.</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 md:px-8">
        <h2 class="mb-16 text-5xl font-bold font-heading">Orders &amp; returns</h2>
        <div class="pt-12 pb-16 pr-8 md:pr-20 w-full bg-gray-100">
          <div class="pl-8 md:pl-16 lg:pl-28 border-l-2 border-blue-300">
            <h3 class="mb-5 text-xl font-bold font-heading">A eget euismod dignissim, felis tortor mollis eros, non ultricies turpis eget leo?</h3>
            <p class="text-gray-500">Curabitur non tortor quis mauris vestibulum imperdiet pellentesque et est. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 md:px-8 hidden" :class="{'hidden': !showContent}">
        <h2 class="mb-16 text-5xl font-bold font-heading">Orders &amp; payments</h2>
        <div class="pt-12 pb-16 pr-8 md:pr-20 w-full bg-gray-100">

<section class="relative py-20 lg:pt-32 bg-blue-800 overflow-x-hidden">
  <img class="absolute top-0 left-0 right-0 h-96 z-10 object-cover w-full" src="yofte-assets/images/placeholder-banner.png" alt="">
  <img class="hidden md:block absolute top-0 left-0 z-10" src="yofte-assets/elements/white-line.svg" alt="">
  <img class="absolute top-50 right-0 -mr-12 z-10 transform -rotate-90" src="yofte-assets/elements/orange-line.svg" alt="">
  <img class="absolute bottom-50 left-0 w-72" src="yofte-assets/elements/violet-line.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <span class="text-2xl text-white">The most popular</span>
    <h2 class="mt-4 mb-16 text-4xl md:text-5xl text-white font-bold font-heading">Summer Sports</h2>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-16 lg:mb-0">
        <a class="block mb-10" href="#">
          <div class="relative">
            <span class="absolute bottom-0 left-0 ml-6 mb-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span>
            <img class="w-full h-96 object-cover" src="yofte-assets/images/placeholder-playing-tennis.png" alt="">
          </div>
          <div class="mt-12">
            <div class="mb-2">
              <h3 class="mb-3 text-3xl text-white font-bold font-heading">Tennis racket Sanks 2</h3>
              <p class="text-xl font-bold font-heading text-white">
                <span>$295.30</span>
                <span class="text-xs text-gray-500 font-semibold font-heading line-through">$330.90</span>
              </p>
            </div>
          </div>

<section class="py-20">
  <div class="container mx-auto px-4">
    <h2 class="mb-8 text-sm font-bold font-heading text-gray-400">TRUSTED BY BRANDS ALL OVER THE WORLD</h2>
    <div class="flex flex-wrap -mx-4 -mb-6">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6">
        <div class="py-10 px-2 rounded-md border border-blue-300">
          <img class="mx-auto h-6" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6">
        <div class="py-10 px-2 rounded-md border border-blue-300">
          <img class="mx-auto h-6" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6">
        <div class="py-10 px-2 rounded-md border border-blue-300">
          <img class="mx-auto h-6" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6">
        <div class="py-10 px-2 rounded-md border border-blue-300">
          <img class="mx-auto h-6" src="yofte-assets/brands/nike.svg" alt="">
        </div>
      </div>

<section class="relative py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <h2 class="mb-20 text-5xl font-bold font-heading">Product Reviews</h2>
    <div class="overflow-hidden">
      <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">
          <div class="relative flex mb-20 flex-wrap bg-white">
            <div class="hidden md:block absolute top-1/2 left-0 w-64 h-2/3 -ml-6 transform -translate-y-1/2 bg-blue-200"></div>
            <div class="relative w-full md:w-1/2 lg:w-1/3 h-64 md:h-auto">
              <img class="h-full w-full object-cover" src="yofte-assets/images/bottles-big.png" alt="">
            </div>
            <div class="w-full md:w-1/2 lg:w-2/3 p-6 self-center">
              <div class="max-w-lg mx-auto">
                <div class="mb-10 pb-10 border-b">
                  <h2 class="mb-2 text-3xl font-bold font-heading">BRILE water filter carafe</h2>
                  <span class="text-lg font-bold font-heading text-blue-300">$29.99</span>
                </div>
                <div class="mb-10">
                  <button>
                    <img class="h-6" src="yofte-assets/elements/star-gold.svg" alt="">
                  </button>
                  <button>
                    <img class="h-6" src="yofte-assets/elements/star-gold.svg" alt="">
                  </button>

<section class="py-20 overflow-x-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 11 }">
  <div class="container mx-auto px-4">
    <h2 class="mb-8 text-4xl md:text-5xl font-bold font-heading">Discover our products</h2>
    <p class="mb-16 lg:mb-24 text-gray-500 text-lg">Fusce pharetra lectus felis, eget temp.</p>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="mb-20 flex transition-transform duration-500 ease-in-out">
      <div x-ref="slide1" class="flex-shrink-0 h-full w-full md:w-1/2 lg:w-1/4 px-3">
        <div class="p-6 bg-gray-50">
          <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-red-500 rounded-full text-red-500 bg-white">-10%</span>
          <a class="block px-6 mt-8 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/tennisball.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">Tennis ball (2)</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$14.30</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$15.90</span>
            </p>
          </a>
          <a class="ml-auto mr-2 flex items-center justify-center w-12 h-12 border rounded-lg hover:border-gray-500" href="#">
            <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="#161616"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="#161616"></rect></svg>
          </a>
        </div>
      </div>
      <div x-ref="slide2" class="flex-shrink-0 h-full w-full md:w-1/2 lg:w-1/4 px-3">
        <div class="p-6 bg-gray-50">
          <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-red-500 rounded-full text-red-500 bg-white">-15%</span>

<section class="relative py-20 bg-gray-100 overflow-x-hidden">
  <div class="relative container mx-auto px-4">
    <h2 class="mb-14 text-5xl font-bold font-heading">Checkout</h2>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <form action="">
          <div class="flex mb-10 items-center">
            <span class="inline-flex mr-8 items-center justify-center w-12 h-12 rounded-full bg-blue-300 text-white">1</span>
            <h3 class="text-2xl font-bold font-heading">Delivery</h3>
          </div>
          <div class="mb-12">
            <label class="font-bold font-heading text-gray-600" for="">E-mail address</label>
            <input class="block w-full mt-4 py-4 px-4 bg-white border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="email">
          </div>
          <div class="flex mb-10 items-center">
            <span class="inline-flex mr-8 items-center justify-center w-12 h-12 rounded-full bg-purple-300 text-white">2</span>
            <h3 class="text-2xl font-bold font-heading">Shipping informations</h3>
          </div>
          <div class="mb-12">
            <div class="flex flex-wrap -mx-4 mb-10">
              <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
                <label class="font-bold font-heading text-gray-600" for="">First name</label>
                <input class="block w-full mt-4 py-4 px-4 bg-white border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text">
              </div>

<section class="relative" x-data="{ mobileNavOpen: false }">
  <div class="py-2 bg-blue-600">
    <div class="flex items-center justify-center">
      <svg class="mr-2" width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="3.07129" width="4" height="10" rx="2" transform="rotate(-45 0 3.07129)" fill="white"></rect><rect x="8" y="2.82861" width="4" height="10" rx="2" transform="rotate(-45 8 2.82861)" fill="white"></rect></svg>
      <p class="text-xs font-bold font-heading text-blue-100">Hi, you’ re new here! Get 20% off card!</p>
    </div>
  </div>
  <nav class="relative flex justify-between bg-blue-50 bg-opacity-30">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="flex-shrink-0 text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <ul class="hidden lg:flex absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:items-center lg:w-auto">
        <li><a class="mr-12 font-bold font-heading hover:text-gray-600" href="#">Category</a></li>
        <li><a class="mr-12 font-bold font-heading hover:text-gray-600" href="#">Collection</a></li>
        <li><a class="mr-12 font-bold font-heading hover:text-gray-600" href="#">Story</a></li>
        <li><a class="mr-12 font-bold font-heading hover:text-gray-600" href="#">Brand</a></li>
        <li><a class="font-bold font-heading hover:text-gray-600" href="#">Photos</a></li>
      </ul>
    </div>
    <div class="hidden xl:flex items-center justify-end mr-12">
      <a class="mr-10" href="#">
        <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 37, color: 1, grid: 3, showContent: false }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20 items-center justify-between">
      <div class="w-full lg:w-auto px-4 mb-12 xl:mb-0">
        <h2 class="text-5xl font-bold font-heading">
          <span>Found 125 results for</span>
          <a class="relative text-blue-300 underline" href="#">Sports</a>
        </h2>
      </div>
      <div class="w-full lg:w-auto px-4 flex flex-wrap items-center">
        <div class="w-full sm:w-auto mb-4 sm:mb-0 mr-5">
          <select class="pl-8 py-4 bg-white text-lg border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
            <option value="1">Sort by newest</option>
            <option value="2">Sort by price</option>
            <option value="3">Sort by most popular</option>
          </select>
        </div>
        <a x-on:click.prevent="grid = 3" class="inline-block mr-3 h-full bg-white hover:bg-white p-4 rounded-md border group" :class="{ 'bg-white': grid == 3, 'text-gray-200': grid !== 3 }" href="#">
            <svg class="text-blue-300 group-hover:text-blue-300" :class="{ 'text-blue-300': grid==3 }" 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="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 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 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></svg>
        </a>
        <a x-on:click.prevent="grid = 4" class="inline-block h-full p-4 border hover:bg-white rounded-md group" :class="{ 'bg-white': grid == 4, 'text-gray-200': grid !== 4 }" href="#">
            <svg class="text-gray-200 group-hover:text-blue-300" :class="{ 'text-blue-300': grid==4 }" 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>

<section class="relative" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
  <div class="z-50 fixed top-0 right-0 bottom-0 w-full max-w-2xl p-10 overflow-y-scroll bg-white">
    <div class="flex mb-10 justify-between">
      <h3 class="text-3xl font-bold font-heading">Your Cart</h3>
      <button x-on:click="open=false">
        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.0234" y="3.53906" width="2" height="12" transform="rotate(45 12.0234 3.53906)" fill="#161616"></rect><rect x="13.4297" y="12.0254" width="2" height="12" transform="rotate(135 13.4297 12.0254)" fill="#161616"></rect></svg>
      </button>
    </div>
    <div class="mb-10">
      <div class="flex mb-6 flex-wrap -mx-4 items-center justify-between">
        <div class="w-full sm:w-4/5 px-4 mb-8 lg:mb-0">
          <div class="flex flex-wrap w-full">
            <div class="w-full lg:w-1/5 mb-4 lg:mb-0">
              <div class="flex items-center justify-center h-32 mb-4 lg:mb-0 bg-gray-100">
                <img class="h-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
              </div>
            </div>
            <div class="w-full lg:w-4/5 lg:pl-10">
              <h3 class="text-xl font-bold font-heading">BRILE water filter carafe</h3>
              <p class="mb-4 text-gray-500">Maecenas 0.7 commodo sit</p>
              <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>

<section class="py-20 overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-center -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="h-full p-6 md:p-12 border">
          <div class="flex items-center">
            <span class="flex-shrink-0 inline-flex mr-4 md:mr-10 items-center justify-center w-20 h-20 bg-blue-300 rounded-full">
              <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M34.9845 11.6702C33.7519 10.3368 32 9.60814 30.0543 9.60814H24.9767V6.75543C24.9767 6.2438 24.5581 5.8252 24.0465 5.8252H0.930233C0.418605 5.8252 0 6.2438 0 6.75543V27.2128C0 27.7244 0.418605 28.143 0.930233 28.143H4.63566C4.93798 29.864 6.43411 31.174 8.24031 31.174C10.0465 31.174 11.5426 29.864 11.845 28.143H24.0465H26.0853C26.3876 29.864 27.8837 31.174 29.6899 31.174C31.4961 31.174 32.9922 29.864 33.2946 28.143H36.0698C36.5814 28.143 37 27.7244 37 27.2128V17.6004C36.9922 15.143 36.3023 13.0888 34.9845 11.6702ZM1.86047 7.68566H23.1163V10.5384V26.2903H11.6822C11.1783 24.8795 9.82171 23.864 8.24031 23.864C6.65892 23.864 5.30233 24.8795 4.79845 26.2903H1.86047V7.68566ZM8.24031 29.3136C7.24806 29.3136 6.44186 28.5074 6.44186 27.5151C6.44186 26.5229 7.24806 25.7167 8.24031 25.7167C9.23256 25.7167 10.0388 26.5229 10.0388 27.5151C10.0388 28.5074 9.23256 29.3136 8.24031 29.3136ZM29.6899 29.3136C28.6977 29.3136 27.8915 28.5074 27.8915 27.5151C27.8915 26.5229 28.6977 25.7167 29.6899 25.7167C30.6822 25.7167 31.4884 26.5229 31.4884 27.5151C31.4884 28.5074 30.6822 29.3136 29.6899 29.3136ZM35.1318 26.2826H33.1318C32.6279 24.8717 31.2713 23.8562 29.6899 23.8562C28.1085 23.8562 26.7519 24.8717 26.2481 26.2826H24.9845V11.4686H30.062C33.1938 11.4686 35.1395 13.8174 35.1395 17.6004V26.2826H35.1318Z" fill="white"></path>
              </svg>
            </span>
            <div>
              <h3 class="mb-4 text-xl font-bold font-heading">Free Shipping</h3>
              <p>From $45</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="h-full p-6 md:p-12 border">
          <div class="flex items-center">
            <span class="flex-shrink-0 inline-flex mr-4 md:mr-10 items-center justify-center w-20 h-20 bg-indigo-300 rounded-full">
              <svg width="39" height="36" viewBox="0 0 39 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M33.7601 5.67776C30.3819 2.38616 25.8883 0.572266 21.1139 0.572266C16.2512 0.572266 11.7014 2.44089 8.30713 5.83414C7.93802 6.20161 7.94604 6.79581 8.32318 7.16329C8.70032 7.52294 9.31017 7.51512 9.68731 7.14765C12.7205 4.12188 16.7727 2.45653 21.1139 2.45653C29.9165 2.44871 37.0742 9.42284 37.0742 17.9998C37.0742 26.5767 29.9165 33.5508 21.1139 33.5508C12.3113 33.5508 5.15359 26.5767 5.15359 17.9998V17.8043L6.7424 19.3524C6.92696 19.5322 7.17571 19.626 7.42446 19.626C7.67322 19.626 7.91395 19.5322 8.10653 19.3524C8.48367 18.9849 8.48367 18.3907 8.10653 18.0232L4.88077 14.8724C4.50363 14.5049 3.89378 14.5049 3.51664 14.8724L0.282856 18.0232C-0.0942853 18.3907 -0.0942853 18.9849 0.282856 19.3524C0.467414 19.5322 0.716167 19.626 0.96492 19.626C1.21367 19.626 1.4544 19.5322 1.64698 19.3524L3.23579 17.8043V17.9998C3.23579 22.6518 5.09742 27.0302 8.47565 30.3218C11.8539 33.6134 16.3475 35.4273 21.1219 35.4273C25.8964 35.4273 30.39 33.6134 33.7682 30.3218C37.1464 27.0302 39 22.6518 39 17.9998C39 13.3477 37.1384 8.96937 33.7601 5.67776Z" fill="white"></path>

<section class="py-20 bg-gray-100" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <h2 class="mb-10 text-center text-sm font-bold font-heading text-gray-400">TRUSTED BY BRANDS ALL OVER THE WORLD</h2>
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-1/12 px-4 mb-10 md:mb-0">
        <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden md:flex mx-auto flex-shrink-0 items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md" href="#">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
          </svg>
        </a>
        <div class="md:hidden flex justify-center">
          <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-6 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md" href="#">
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
            </svg>
          </a>
          <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md" href="#">
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full md:w-10/12 px-4 -mb-6">

<section class="pt-20" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <ul class="flex flex-wrap mb-8 items-center">
      <li class="mr-5">
        <a class="inline-block mr-5 text-xs font-bold font-heading uppercase text-gray-300" href="#">HOME</a>
        <span class="inline-block">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.131073 0.755835C-0.0436907 0.581885 -0.0436907 0.302414 0.131073 0.129744C0.305837 -0.0429273 0.588197 -0.0435662 0.76296 0.129744L5.86893 5.18707C6.04369 5.35975 6.04369 5.63922 5.86893 5.81317L0.762959 10.8705C0.588196 11.0432 0.305836 11.0432 0.131072 10.8705C-0.0436916 10.6972 -0.0436916 10.4171 0.131072 10.2444L4.78774 5.4998L0.131073 0.755835Z" fill="#151515"></path>
          </svg>
        </span>
      </li>
      <li class="mr-5">
        <a class="inline-block mr-5 text-xs font-bold font-heading uppercase text-gray-300" href="#">WATER FILTERS</a>
        <span class="inline-block">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.131073 0.755835C-0.0436907 0.581885 -0.0436907 0.302414 0.131073 0.129744C0.305837 -0.0429273 0.588197 -0.0435662 0.76296 0.129744L5.86893 5.18707C6.04369 5.35975 6.04369 5.63922 5.86893 5.81317L0.762959 10.8705C0.588196 11.0432 0.305836 11.0432 0.131072 10.8705C-0.0436916 10.6972 -0.0436916 10.4171 0.131072 10.2444L4.78774 5.4998L0.131073 0.755835Z" fill="#151515"></path>
          </svg>
        </span>
      </li>
      <li><a class="inline-block text-xs font-bold font-heading uppercase text-gray-300" href="#">BRILE WATER FILTER CARAFE</a></li>
    </ul>
    <div class="flex flex-wrap items-center -mx-4 mb-24 lg:mb-52">
      <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
        <span class="text-gray-500">Brille</span>

<section class="overflow-x-hidden">
  <div class="py-10 bg-white">
    <div class="container mx-auto px-4">
      <a class="text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
    </div>
  </div>
  <div class="relative py-20 md:pt-32 md:pb-32 bg-blue-800" style="background-image: url('yofte-assets/elements/lines-color4.svg'); background-size: cover;" alt="">
    <div class="container mx-auto px-4">
      <div class="text-center">
        <img class="mb-4 w-full max-w-xl mx-auto" src="yofte-assets/elements/404-header-fix.png" alt="">
        <h3 class="mb-20 text-xl font-bold font-heading text-white">Sorry, we can’t find that page or something has gone wrong</h3>
        <div class="flex flex-wrap items-center justify-center">
          <p class="mb-12 md:mb-0 text-white">Checkout for any URL misspelling.</p>
          <a class="md:ml-12 inline-block w-full md:w-auto text-center bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Homepage</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative py-20 md:py-40 bg-orange-300">
      <img class="hidden md:block absolute inset-0 w-full h-full" src="yofte-assets/elements/cta-lines-white.svg" alt="">
      <div class="relative text-center">
        <div class="inline-block px-4 relative mb-6">
          <div class="absolute top-0 left-0 h-1 bg-gray-900 w-full"></div>
          <div class="absolute bottom-0 left-0 h-1 bg-gray-900 w-full"></div>
          <h2 class="relative text-7xl font-bold font-heading text-white">Every Friday</h2>
        </div>
        <p class="mb-12 text-2xl font-bold font-heading text-white uppercase italic">student discount (10%)</p>
        <a class="inline-block bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-5 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Latest Blog</h2>
  </div>
  <div class="flex flex-wrap -mx-3 mb-24">
    <div class="w-full lg:w-1/2 px-3 mb-12 lg:mb-0">
      <div class="relative">
        <div class="hidden md:block absolute bottom-0 right-0 xl:left-1/2 z-10 mr-10 mb-10">
          <span class="inline-block mb-4 md:mb-0 mr-4 font-bold font-heading text-blue-300 uppercase">15 May 2021</span>
          <a class="inline-block px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>
        </div>
        <a class="group relative flex flex-wrap bg-gray-50" href="#">
          <div class="w-full lg:w-1/3">
            <img class="h-full w-full object-cover" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
          </div>
          <div class="relative w-full lg:w-2/3">
            <div class="absolute bottom-0 left-0 ml-20 w-64 py-px bg-blue-300 group-hover:bg-orange-300"></div>
            <div class="flex h-full items-center md:pb-20">
              <div class="p-8 xl:p-20">
                <h3 class="mb-8 md:mb-0 text-4xl font-bold font-heading">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
                <span class="md:hidden inline-block mb-4 md:mb-0 mr-4 font-bold font-heading text-blue-300 uppercase">15 May 2021</span>
              </div>
            </div>
          </div>