Tailwind CSS Components

<section class="py-20 bg-blue-800 overflow-x-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <div class="absolute inset-0 border border-gray-300 my-24 -ml-4 -mr-4"></div>
      <div class="relative mx-auto py-28 px-4 bg-blue-800 border border-white text-center">
        <a class="inline-block mb-12 text-3xl font-bold font-heading text-white" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt="" width="auto">
        </a>
        <h2 class="mb-14 text-4xl text-white font-bold font-heading">Sign up with</h2>
        <div class="relative max-w-xl mx-auto">
          <img class="hidden md:block absolute top-0 -right-1/2 -mr-16" src="yofte-assets/elements/white-sign-line.svg" alt="">
          <img class="hidden md:block absolute bottom-0 -left-1/2 -ml-24" src="yofte-assets/elements/orange-sign-line.svg" alt="">
          <img class="hidden md:block absolute bottom-0 -right-1/2 -mb-12 -mr-40" src="yofte-assets/elements/purple-sign-line.svg" alt="">
          <div class="flex flex-wrap -mx-2 mb-10 justify-between pb-16 border-b border-gray-500">
            <div class="w-full md:w-1/3 px-2 mb-2 md:mb-0">
              <a class="inline-flex items-center justify-center w-full h-16 border-2 border-gray-500 hover:border-gray-400 rounded-md" href="#">
                <img src="yofte-assets/brands/google.svg" alt="">
                <span class="ml-4 text-white uppercase font-bold font-heading">Google</span>
              </a>
            </div>
            <div class="w-full md:w-1/3 px-2 mb-2 md:mb-0">
              <a class="inline-flex items-center justify-center w-full h-16 border-2 border-gray-500 hover:border-gray-400 rounded-md" href="#">
                <img src="yofte-assets/brands/apple.svg" alt="">
                <span class="ml-4 text-white uppercase font-bold font-heading">Apple</span>

<section class="relative py-20 bg-blue-800">
  <img class="absolute inset-0 h-full w-full object-cover" src="yofte-assets/elements/lines3.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="lg:py-20">
          <span class="mb-4 text-white text-2xl">More ideas</span>
          <h2 class="mt-14 mb-8 md:mb-14 text-6xl md:text-7xl text-white font-bold font-heading">Features styles. Check it now.</h2>
          <p class="mb-8 md:mb-24 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 class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 md:mb-0">
        <img class="h-full object-cover" src="yofte-assets/images/placeholder4.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <img class="h-full object-cover" src="yofte-assets/images/placeholder3.png" alt="">
      </div>
    </div>
  </div>
</section>

<div class="fixed bottom-0 inset-x-0 z-50 p-16 bg-white" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto mb-8">
    <div class="max-w-xl">
      <h5 class="mb-8 text-3xl font-bold font-heading">Cookies settings</h5>
      <p class="mb-10 text-gray-500">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation. Etiam commodo ipsum et imperdiet imperdiet. Fusce pellentesque, lacus.</p>
      <a class="inline-flex mb-4 md:mb-0 mr-6 items-center text-blue-500 underline" href="#">
        <span class="mr-2">More</span>
        <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M26.0871 7.41489L19.3999 14.102L18.564 13.2661L24.2439 7.58625L0.592385 7.59043L0.592385 6.41183L24.2439 6.40765L18.982 1.14571L19.8179 0.309822L26.0871 6.579C26.3179 6.80984 26.3179 7.18406 26.0871 7.41489Z" fill="#3C60D9"></path>
        </svg>
      </a>
      <a x-on:click.prevent="open=false" 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="#">Accept</a>
    </div>
  </div>
</div>

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="text-center pb-20 border-b border-gray-300">
      <a class="inline-block mb-20 text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <ul class="flex flex-wrap -mb-4 -mx-3 items-center justify-center">
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Category</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Collection</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Story</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Brand</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Partners</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Videos</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full hover:text-white bg-white hover:bg-gray-900 font-semibold font-heading transition duration-300" href="#">Contact</a></li>
      </ul>
      <div class="flex mt-20 -mx-4 flex-wrap text-left">
        <div class="w-full lg:w-auto px-4 mb-10 lg:mb-0">
          <h3 class="mb-3 text-xl text-orange-300 font-bold font-heading">Contact Us</h3>
          <p class="text-2xl md:text-3xl font-bold font-heading">+41 0087 44 431</p>
        </div>
        <div class="w-full lg:w-auto px-4 mb-10 lg:mb-0">
          <h3 class="mb-3 text-xl text-orange-300 font-bold font-heading">Email</h3>
          <p class="text-2xl md:text-3xl font-bold font-heading">help@example.com</p>
        </div>

<section class="relative py-20 lg:py-40 bg-blue-300 overflow-x-hidden">
  <img class="absolute inset-0 w-full h-full" src="yofte-assets/elements/color-lines.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center">
      <h2 class="mb-5 text-4xl md:text-5xl text-white font-bold font-heading">Join Our Newsletter</h2>
      <p class="mb-6 text-blue-100">Sign me up for Yofte newsletters to get exclusive perks.</p>
      <img class="mb-12 inline-block" src="yofte-assets/elements/quote-orange.svg" alt="">
      <div class="relative max-w-xl mx-auto bg-white rounded-lg">
        <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt="">
        <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg">
          <div class="relative flex flex-wrap items-center justify-between">
            <div class="relative flex-1">
              <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span>
              <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="steven@example.dev">
            </div>
            <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-3 mb-6">
          <div class="text-center p-8 md:p-16 bg-white">
            <span class="inline-flex mb-8 md: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">Free Shipping</h3>
            <p class="mb-6">From $45</p>
            <p class="text-lg text-gray-500">Ante ipsum primis in faucibus orci luctus.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-3 mb-6">
          <div class="text-center p-8 md:p-16 bg-white">
            <span class="inline-flex mb-8 md:mb-16 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>
                <path d="M20.4014 8C17.272 8 14.7283 10.4785 14.7283 13.5277V16.1938H12.9629C12.4333 16.1938 12 16.616 12 17.132V26.4908C12 27.0068 12.4333 27.429 12.9629 27.429H27.848C28.3776 27.429 28.8109 27.0068 28.8109 26.4908V17.1399C28.8109 16.6238 28.3776 16.2016 27.848 16.2016H26.0826V13.5355C26.0826 10.4863 23.5309 8 20.4014 8ZM16.6541 13.5355C16.6541 11.5183 18.3392 9.88427 20.4014 9.88427C22.4637 9.88427 24.1488 11.5262 24.1488 13.5355V16.2016H16.6541V13.5355ZM26.885 25.5526H13.9258V18.0703H26.885V25.5526Z" fill="white"></path>
              </svg>
            </span>

<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="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between bg-gray-100 border-b">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="lg:mr-8 2xl:mr-20 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 max-w-xs py-3 pl-8 pr-2 bg-white 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>
      </div>
      <ul class="hidden xl:flex px-4 mx-auto font-semibold font-heading">
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Category</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Collection</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Story</a></li>
        <li><a class="hover:text-gray-600" href="#">Brand</a></li>
      </ul>

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 37, color: 1, grid: 3 }">
  <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="{ mobileNavOpen: false }">
  <nav class="flex justify-between border-b">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="hidden xl:block mr-16" 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>
      <ul class="hidden xl:flex font-semibold font-heading">
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Category</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Collection</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Story</a></li>
        <li><a class="hover:text-gray-600" href="#">Brand</a></li>
      </ul>
      <a class="flex-shrink-0 xl:mx-auto 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:inline-block mr-14">
        <input class="py-5 px-8 w-full placeholder-gray-400 text-xs uppercase font-semibold font-heading bg-gray-50 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text" placeholder="Search">
      </div>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" href="#">

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 37, color: 1, grid: 3 }">
  <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="{ 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 bg-gray-100" x-data="{ price: 50, size: 37, color: 1, grid: 3 }">
  <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="{ mobileNavOpen: false }">
  <div class="py-2 bg-blue-500">
    <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-50">Hi, you’ re new here! Get 20% off card!</p>
    </div>
  </div>
  <nav class="relative flex flex-wrap">
    <div class="flex justify-between w-full bg-blue-300">
      <a class="hidden xl:flex items-center px-12 border-r border-blue-200" 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="white"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="white"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="white"></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-white.svg" alt="" width="auto">
        </a>
        <ul class="hidden lg:flex absolute top-0 left-1/2 transform translate-y-1/2 -translate-x-1/2 mt-2 lg:items-center lg:w-auto">
          <li><a class="inline-block w-28 mr-3 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full font-bold font-heading transition duration-200" href="#">Category</a></li>
          <li><a class="inline-block w-28 mr-3 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full font-bold font-heading transition duration-200" href="#">Collection</a></li>
          <li><a class="inline-block w-28 mr-3 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full font-bold font-heading transition duration-200" href="#">Story</a></li>

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 37, color: 1, grid: 3 }">
  <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="{ 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="relative pb-32 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="relative z-10">
    <div class="flex h-20 py-6 px-6 items-center justify-between bg-transparent relative">
      <a class="inline-block text-2xl font-bold mr-10" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">

<section class="p-6" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="relative pb-32 md:pb-52 px-4 sm:px-8 rounded-md shadow overflow-hidden">
    <img class="absolute top-0 left-0 w-full h-full object-cover" src="shopal-assets/background/background-office.png" alt="">
    <nav class="mb-24 md:mb-32">
      <div class="flex py-8 items-center justify-between bg-transparent relative">
        <a class="inline-block text-2xl font-bold mr-10" href="#">
          <img src="shopal-assets/logos/shopal-logo-white.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-white hover:text-green-500">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
              </div>
            </button>
          </li>
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-white hover:text-green-500">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="relative overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="flex h-20 px-6 items-center justify-between bg-white relative z-10">
    <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-2xl font-bold" href="#">
      <img src="shopal-assets/logos/shopal-logo.svg" alt="">
    </a>
    <div class="hidden lg:inline-flex items-center">
      <ul class="flex items-center">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>

<section class="relative overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="flex h-20 px-6 items-center justify-between bg-white relative z-10">
    <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-2xl font-bold" href="#">
      <img src="shopal-assets/logos/shopal-logo.svg" alt="">
    </a>
    <div class="hidden lg:inline-flex items-center">
      <ul class="flex items-center">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>