Tailwind CSS Components

<section class="relative overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center">
      <div class="w-full lg:w-2/6 px-4 mb-12 lg:mb-0">
        <div class="py-20 text-center">
          <a class="inline-block mb-14 text-3xl font-bold font-heading" href="#">
            <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
          </a>
          <h3 class="mb-8 text-4xl md:text-5xl font-bold font-heading">Signing up with social is super quick</h3>
          <p class="mb-10">Please, do not hesitate</p>
          <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">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>
        <img class="lg:hidden h-96 w-full object-cover" src="yofte-assets/images/placeholder-sign.png" alt="">
      </div>
    </div>

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between -mb-8">
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/exxon.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/ea-sports.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/eurosport.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/nike.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/aol.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <img class="mx-auto h-8" src="yofte-assets/brands/north-face.svg" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 8 }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 text-4xl font-bold font-heading">FAQs</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="mb-20 flex transition-transform duration-500 ease-in-out -m-8">
      <div x-ref="slide1" class="flex-shrink-0 w-full max-w-xl p-8">
        <div class="pt-12 pb-16 pr-8 md:pr-20 h-full bg-white">
          <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 x-ref="slide2" class="flex-shrink-0 w-full max-w-xl p-8">
        <div class="pt-12 pb-16 pr-8 md:pr-20 h-full bg-white">
          <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. Suspendisse ullamcorper, ex ac vehicula. Lorem, ipsum dolor.</p>
          </div>
        </div>
      </div>
      <div x-ref="slide3" class="flex-shrink-0 w-full max-w-xl p-8">
        <div class="pt-12 pb-16 pr-8 md:pr-20 h-full bg-white">
          <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>

<div 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-xl bg-white overflow-y-scroll">
    <div class="p-6 md:pt-12 md:pb-6 md:px-12 bg-white">
      <div class="text-right">
        <a x-on:click.prevent="open=false" class="inline-block ml-auto" href="#">
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.0273" y="4.53223" width="2" height="12" transform="rotate(45 12.0273 4.53223)" fill="#161616"></rect><rect x="13.4336" y="13.0186" width="2" height="12" transform="rotate(135 13.4336 13.0186)" fill="#161616"></rect></svg>
        </a>
      </div>
      <div class="flex mb-12 items-center">
        <h3 class="text-4xl font-bold font-heading">Your cart</h3>
        <span class="inline-flex ml-4 items-center justify-center w-8 h-8 rounded-full bg-orange-300 text-base font-bold font-heading text-white">2</span>
      </div>
      <div class="flex flex-wrap -mx-4 mb-10 items-center">
        <div class="w-full md:w-1/3 mb-6 md:mb-0 px-4">
          <div class="flex h-32 items-center justify-center bg-gray-100">
            <img class="h-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-2/3 px-4">
          <div>
            <h3 class="mb-1 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="flex flex-wrap items-center justify-between">

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative bg-white overflow-hidden">
      <img class="absolute top-0 left-0 xl:-ml-40 w-full h-full" src="yofte-assets/elements/cta-lines2.svg" alt="">
      <div class="relative flex flex-wrap items-center">
        <div class="w-full md:w-4/6 p-10 lg:pl-40">
          <span class="text-xl md:text-2xl">New Products</span>
          <h2 class="mt-4 mb-14 text-4xl md:text-5xl font-bold font-heading">Check our new collection</h2>
          <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">More</a>
        </div>
        <img class="relative ml-auto w-full md:w-2/6 h-96 object-cover" src="yofte-assets/images/placeholder-bottle-frame.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="overflow-x-hidden">
  <div class="py-10 bg-gray-100">
    <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-32 bg-gray-50" style="background-image: url('yofte-assets/elements/lines-color-center.svg'); background-size: cover;" alt="">
    <div>
      <div class="relative flex flex-wrap lg:flex-nowrap items-center justify-center px-4 text-center lg:text-left">
        <div class="w-full lg:w-auto mb-6 lg:mb-0">
          <img class="block mx-auto" src="yofte-assets/elements/404.svg" alt="">
        </div>
        <div class="w-full lg:w-auto">
          <h2 class="max-w-xl mx-auto md:py-10 text-3xl font-bold font-heading bg-gray-50">Sorry, we can’t find that page or something has gone wrong</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="py-10 bg-gray-100">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center justify-center">
        <p class="mb-8 md:mb-0 text-gray-400 font-semibold font-heading">Checkout for any URL misspelling.</p>

<section class="relative py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-12">
      <div class="w-full lg:w-1/2 px-12 mb-12 lg:mb-0">
        <div class="max-w-xl lg:pr-16">
          <h2 class="mb-14 text-4xl md:text-6xl font-bold font-heading">
            <span>Exclusive offers and</span>
            <span class="text-blue-300">$10 Voucher</span>
            <span>when you sign up to our Newsletter</span>
          </h2>
          <ul class="flex flex-col items-start">
            <li class="inline-flex items-center mb-2 px-6 py-3 bg-white rounded-full">
              <span class="mr-6">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="18" cy="18" r="18" fill="#A692FF"></circle>
                  <g clip-path="url(#clip0)">
                    <path d="M15.135 24.3373L9 18.2023L9.81024 17.392L15.135 22.7168L26.1898 11.6621L27 12.4724L15.135 24.3373Z" fill="white"></path>
                  </g>
                  <defs><clipPath id="clip0"><rect width="18" height="18" fill="white" transform="translate(9 9)"></rect></clipPath></defs>
                </svg>
              </span>
              <p>Non gravida metus, eget imperdiet</p>
            </li>
            <li class="inline-flex items-center mb-2 px-6 py-3 bg-white rounded-full">

<section class="bg-gray-100">
  <div class="relative container mx-auto px-4 h-128 md:h-192">
    <div class="absolute inset-0 flex items-end w-full bg-center bg-no-repeat bg-cover" style="background-image: url('yofte-assets/images/placeholder-marta-wave.png');">
      <div class="max-w-md px-4 md:ml-16 mb-20">
        <span class="mb-4 text-2xl">More inspirations</span>
        <h2 class="mt-6 mb-12 text-5xl font-bold font-heading">Featured styles. Check it now.</h2>
        <a class="inline-block bg-white hover:bg-gray-900 hover:text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Learn More</a>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 pb-6 lg:pb-16 border-b border-gray-400">
      <div class="w-full lg:w-3/5 px-4 mb-20">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10 lg:mb-0">
            <h3 class="mb-8 text-xl font-bold font-heading text-white">Information</h3>
            <ul>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Newsroom</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Story</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Yofte Careers</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Investor Relations</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Reward program</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Delivery information</a></li>
              <li><a class="text-gray-400 hover:text-gray-300" href="#">Paying by invoice</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10 lg:mb-0">
            <h3 class="mb-8 text-xl font-bold font-heading text-white">Customer Services</h3>
            <ul>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Return an order</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Search Terms</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Advanced Search</a></li>
              <li class="mb-6"><a class="text-gray-400 hover:text-gray-300" href="#">Orders and Returns</a></li>

<section class="py-20" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, size: '' }" x-init="size = $refs.size1.textContent">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full 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>

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="mb-12 text-5xl font-bold font-heading">Checkout</h2>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="mb-2 px-8 lg:px-20 py-12 bg-white">
          <div class="flex mb-10 items-center">
            <span class="flex-shrink-0 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="flex flex-wrap -mx-4 mb-10">
            <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
              <div>
                <label class="font-bold font-heading text-gray-600" for="">First name</label>
                <input class="block w-full mt-4 py-4 px-4 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text">
              </div>
            </div>
            <div class="w-full lg:w-1/2 px-4">
              <div>
                <label class="font-bold font-heading text-gray-600" for="">Last name</label>
                <input class="block w-full mt-4 py-4 px-4 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text">
              </div>
            </div>
            <div class="w-full mt-10 mb-10 px-4">

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between border-b">
    <a class="hidden xl:flex items-center px-12 border-r" href="#">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="black"></path>
        <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="black"></path>
        <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="black"></path>
      </svg>
    </a>
    <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>
      <div class="hidden xl:flex mx-auto py-3 pl-8 pr-2 bg-white border border-gray-200 rounded-lg">
        <svg class="w-8 h-10 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <input class="w-full border-0 focus:ring-transparent focus:outline-none py-2" type="text" placeholder="">
        <select class="pl-6 pr-6 border-0 border-l border-gray-100 focus:border-gray-100 focus:ring-transparent focus:outline-none cursor-pointer" name="" id="">
          <option>All&nbsp;items</option>
          <option>Collection</option>
          <option>Option</option>
        </select>

<section class="py-20 overflow-x-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-8">
      <div class="w-full lg:w-1/2 px-8 mb-12 lg:mb-0">
        <h2 class="pb-10 text-5xl font-bold font-heading">General question</h2>
        <div class="mb-20 py-px w-64 bg-blue-300"></div>
        <ul>
          <li x-data="{ accordion: false }">
            <div class="py-8 border-b">
              <div class="flex justify-between items-center">
                <h3 class="mr-4 text-xl font-bold font-heading">Sed eget accumsan ipsum &amp; praesent dignissim?</h3>
                <a x-on:click.prevent="accordion = !accordion" class="p-4 inline-block border rounded-md hover:border-gray-500" href="#">
                    <div :class="{ 'hidden': !accordion }" class="hidden">
                        <svg width="12" height="12" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="#161616"></rect></svg>
                    </div>
                    <div :class="{ 'hidden': accordion }">
                        <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>
                    </div>
                </a>
              </div>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-gray-500 pt-10 pr-20">After curabitur non tortor quis mauris vestibulum imperdiet pellentesque et est. Suspendisse lorem sit amet vehicula.</p>
              </div>
            </div>

<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 -mx-8 mb-20">
      <div class="w-full lg:w-1/2 h-full px-8 mb-12 lg:mb-0">
        <div class="relative">
          <a class="hidden lg:block absolute z-10 bottom-0 right-0 xl:right-1/2 xl:transform xl:translate-x-1/2 lg:mb-10 lg:mr-12 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>
          <a class="group block bg-gray-50" href="#">
            <div class="h-80">
              <img class="h-full w-full object-cover" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="relative">
              <div class="absolute bottom-0 left-0 ml-12 w-44 py-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="flex items-center">
                <div class="p-6 lg:pl-16 lg:py-12 lg:pr-12">
                  <h3 class="mb-8 lg:mb-10 text-3xl lg:text-4xl font-bold font-heading">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
                  <p class="mb-12">Fusce pharetra lectus felis, eget temp lorem ipsum.</p>
                  <span class="inline-block font-bold font-heading text-blue-300 uppercase">15 May 2021</span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>

<section class="py-20 bg-gray-100" x-data="{ 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="py-20 bg-blue-900 overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 lg:mb-0">
        <div class="relative h-full text-center pt-16 border border-gray-500">
          <img class="hidden md:block absolute z-10 top-0 left-1/2 ml-16 lg:ml-8 mt-16" src="yofte-assets/elements/dots.svg" alt="">
          <div class="pb-12 mx-10 border-b border-gray-500">
            <span class="inline-flex mb-16 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>
            <h3 class="mb-4 text-xl font-bold font-heading text-white">Free Shipping</h3>
            <p class="text-white">From $45</p>
          </div>
          <div class="pt-12 px-14 pb-14 text-center">
            <p class="text-lg text-gray-300">Ante ipsum primis in faucibus orci luctus.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 lg:mb-0">
        <div class="relative h-full text-center pt-16 border border-gray-500">
          <img class="hidden lg:block absolute z-10 top-0 left-1/2 ml-16 lg:ml-8 mt-16" src="yofte-assets/elements/dots.svg" alt="">
          <div class="pb-12 mx-10 border-b border-gray-500">

<section class="py-20 bg-gray-100" 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">Discover our products</h2>
    <div class="flex flex-wrap -mx-3 mb-24">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="relative bg-gray-50 h-full">
          <span class="absolute top-0 left-0 ml-6 mt-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>
          <a class="block" href="#">
            <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-basketball-player.png" alt="">
          </a>
          <div class="px-6 pb-6 mt-8">
            <a class="block px-6 mb-2" href="#">
              <h3 class="mb-2 text-xl font-bold font-heading">NIKE basketball ball</h3>
              <p class="text-lg font-bold font-heading text-blue-500">
                <span>$34.30</span>
                <span class="text-xs text-gray-500 font-semibold font-heading line-through">$40.99</span>
              </p>
            </a>
            <a class="ml-auto mr-2 flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md" 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="white"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="white"></rect></svg>
            </a>
          </div>
        </div>
      </div>

<section class="py-20 bg-blue-300">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 pb-6 lg:pb-16 border-b border-gray-400">
      <div class="w-full lg:w-3/5 px-4 mb-20">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10 lg:mb-0">
            <h3 class="mb-8 text-xl font-bold font-heading text-white">Information</h3>
            <ul>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Newsroom</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Story</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Yofte Careers</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Investor Relations</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Reward program</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Delivery information</a></li>
              <li><a class="text-gray-50 hover:text-gray-200" href="#">Paying by invoice</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10 lg:mb-0">
            <h3 class="mb-8 text-xl font-bold font-heading text-white">Customer Service</h3>
            <ul>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Return an order</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Search Terms</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Advanced Search</a></li>
              <li class="mb-6"><a class="text-gray-50 hover:text-gray-200" href="#">Orders and Returns</a></li>

<section class="relative py-20 lg:pt-32 bg-blue-800 overflow-x-hidden">
  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/white-line.svg" alt="">
  <img class="absolute top-50 left-0 mt-64" src="yofte-assets/elements/orange-line.svg" alt="">
  <img class="absolute bottom-0 right-0 w-72" src="yofte-assets/elements/violet-line.svg" alt="">
  <div class="relative container mx-auto px-4">
    <h2 class="mb-16 text-4xl md:text-5xl text-white font-bold font-heading">The Most Popular</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>
        </a>
        <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy Now</a>

<section class="relative pt-20 overflow-x-hidden">
  <div class="bg-blue-200 absolute w-full left-0 top-0 bottom-0 mb-12"></div>
  <div class="bg-gray-100 absolute w-40 h-12 left-0 bottom-0"></div>
  <div class="bg-blue-300 absolute w-1/3 right-0 top-0 bottom-0"></div>
  <div class="container px-4 mx-auto relative">
    <img class="absolute top-0 left-1/2 -ml-64 mt-64 lg:mt-0 w-40 md:w-auto" src="yofte-assets/elements/light-line1.svg" alt="">
    <img class="absolute top-0 right-0 lg:mr-40 lg:mt-20 w-40 md:w-auto" src="yofte-assets/elements/light-line2.svg" alt="">
    <div class="flex flex-wrap">
      <div class="w-full lg:w-2/5">
        <div class="max-w-sm">
          <h2 class="mb-12 text-5xl text-white font-bold font-heading">Summer collection is coming.</h2>
          <a class="mb-12 lg:mb-0 inline-block bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Discover</a>
        </div>
      </div>
      <div class="w-full lg:w-3/5 bg-blue-300">
        <div class="flex relative">
          <img class="w-1/2 lg:w-80 h-96 object-cover" src="yofte-assets/images/placeholder-men-basketball.png" alt="">
          <img class="w-1/2 lg:w-80 h-96 object-cover" src="yofte-assets/images/placeholder-women-smiling.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>