UI Components in Yofte library

Tailwind Component #1

<section class="relative bg-gray-100 overflow-x-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <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>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" 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>
          </svg>
        </a>
        <a class="flex items-center hover:text-gray-600" href="#">
          <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
        </a>
      </div>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-900" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="#8594A5"></path>
      </svg>
    </button>
  </nav>
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-12 lg:mb-0 pt-20 lg:py-32">
        <div class="max-w-md">
          <div class="mb-8 overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
              <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                <h2 class="mb-8 text-5xl lg:text-6xl font-semibold font-heading">Get 10% off site-wide when you spend $30 with code: new</h2>
                <p class="text-lg text-gray-600">Discover more products and inspiration.</p>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                <h2 class="mb-8 text-5xl lg:text-6xl font-semibold font-heading">Enjoy 10% off on your entire purchase when you spend $30 or more</h2>
                <p class="text-lg text-gray-600">Discover more products and inspiration.</p>
              </div>
            </div>
          </div>
          <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="hidden lg:block absolute top-0 transform translate-y-1/2 right-0 w-1">
          <a x-on:click.prevent="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" :class="{'bg-blue-600': activeSlide == 0, 'bg-gray-300': activeSlide !== 0}" class="block w-1/2 h-40 bg-blue-600" href="#"></a>
          <a x-on:click.prevent="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" :class="{'bg-blue-600': activeSlide == 1, 'bg-gray-300': activeSlide !== 1}" class="block w-1/2 h-40 bg-gray-300" href="#"></a>
        </div>
        <div class="absolute bottom-1/2 -mb-24 lg:right-6 inline-block bg-white rounded-lg" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
          <div class="flex p-3">
            <div class="w-52 pt-5 px-4 lg:px-9">
              <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                  <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h3 class="mb-2 text-xl font-bold font-heading w-32">Set gym V2G in&nbsp;colors</h3>
                    <p class="mb-4 lg:mb-0 text-lg font-semibold font-heading text-blue-500">$6.40</p>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h3 class="mb-2 text-xl font-bold font-heading w-32">Gym set V1G in&nbsp;colors</h3>
                    <p class="mb-4 lg:mb-0 text-lg font-semibold font-heading text-blue-500">$14.30</p>
                  </div>
                </div>
              </div>
              <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" :class="{'hidden': activeSlide == 0 }" class="lg:absolute lg:-left-1 bottom-0 flex hidden items-center justify-center w-12 h-12 lg:-mb-6 bg-orange-300 hover:bg-orange-400 text-white rounded-md" href="#">
                <svg class="transform rotate-180" 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>
              <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="lg:absolute bottom-0 flex items-center justify-center w-12 h-12 lg:-mb-6 bg-orange-300 hover:bg-orange-400 text-white rounded-md" href="#">
                <svg class="w-2 h-4" 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 class="w-auto">
              <img class="h-full lg:h-36 rounded-xl object-cover" src="yofte-assets/images/pexels-photo.png" alt="">
            </div>
          </div>
        </div>
        <img class="mx-auto h-96 lg:h-auto" src="yofte-assets/images/water-bottles-mockup.png" alt="">
      </div>
    </div>
    <div class="w-full lg:w-5/6 xl:absolute left-0 bottom-0 right-0 bg-white py-12 px-8 lg:ml-auto">
      <div class="flex flex-wrap items-center justify-center -mx-2 -mb-12">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/nike.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/aol.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/north-face.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <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>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Tailwind Component #2

Tailwind CSS

Yofte

<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="#">
          <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>
          </svg>
        </a>
        <a class="flex items-center hover:text-gray-600" href="#">
          <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
        </a>
      </div>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-900" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="#8594A5"></path>
      </svg>
    </button>
  </nav>
  <div class="relative container mx-auto px-4">
    <img class="absolute bottom-0 inset-x-0 w-full h-80 -mb-16 lg:mb-0 md:h-full object-cover" src="yofte-assets/images/women.png" alt="">
    <div class="hidden lg:flex absolute right-0 top-1/2 transform -translate-y-1/2 flex-col items-center">
      <span class="mb-5 font-bold font-heading">01</span>
      <div class="mb-5 h-16 w-px bg-gray-100"></div>
      <button class="mb-5">
        <img src="yofte-assets/elements/circle.svg" alt="">
      </button>
      <button class="mb-6 w-1 h-1 bg-blue-500 rounded-full"></button>
      <button class="mb-6 w-1 h-1 bg-blue-500 rounded-full"></button>
      <div class="h-16 w-px bg-gray-100"></div>
    </div>
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-12 lg:mb-0 pt-20 lg:pt-32 pb-32 lg:pb-64">
        <div class="max-w-md">
          <h2 class="mb-8 text-5xl lg:text-6xl font-semibold font-heading">Get 10% off site-wide when you spend $30 with code: new</h2>
          <p class="mb-20 text-lg text-gray-600">Discover more products and inspiration.</p>
          <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
        </div>
      </div>
    </div>
  </div>
  <div class="relative bg-gray-100 py-20">
    <div class="container mx-auto px-4">
      <div class="flex lg:-mt-52 mb-20 flex-wrap justify-center">
        <div class="relative h-64 w-full lg:w-96 mb-6 lg:mb-0 lg:mr-6 bg-no-repeat bg-cover bg-right" style="background-image: url('yofte-assets/images/placeholder-snapshot.png');">
          <a class="absolute inset-0 flex items-end" href="#">
            <div class="pl-12 pb-12">
              <h3 class="text-3xl font-bold font-heading text-white">LIFE Bottle 2.0</h3>
              <p class="text-xl text-white font-bold font-heading">
                <span>$10.30</span>
                <span class="text-sm font-normal line-through">11.99</span>
              </p>
            </div>
          </a>
        </div>
        <div class="relative h-64 w-full lg:w-96 bg-no-repeat bg-cover" style="background-image: url('yofte-assets/images/placeholder-playing-tennis.png');">
          <a class="absolute inset-0 flex items-end" href="#">
            <div class="pl-12 pb-12">
              <h3 class="text-3xl font-bold font-heading text-white">Bicycle S20</h3>
              <p class="text-xl text-white font-bold font-heading">
                <span>$10.30</span>
                <span class="text-sm font-normal line-through">11.99</span>
              </p>
            </div>
          </a>
        </div>
      </div>
      <div class="max-w-5xl mx-auto flex flex-wrap items-center justify-center -mb-12">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/nike.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/aol.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/north-face.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <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>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Tailwind Component #3

Tailwind CSS

Yofte

<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-6 pr-3 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>
      </div>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" 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>
          </svg>
        </a>
        <a class="flex items-center hover:text-gray-600" href="#">
          <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
        </a>
      </div>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-900" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="#8594A5"></path>
      </svg>
    </button>
  </nav>
  <div class="relative">
    <img class="lg:absolute top-0 left-0 w-full lg:w-1/2 object-cover" style="height: 680px;" src="https://images.unsplash.com/photo-1514994806776-144805fdde34?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
    <div class="container mx-auto px-4 pb-20 lg:pb-7">
      <div class="relative w-full lg:w-1/2 px-4 ml-auto">
        <div class="max-w-md mx-auto pt-16 lg:pt-28 lg:pb-40">
          <span class="px-3 py-1 border border-blue-300 rounded-full text-xs text-blue-300 font-bold font-heading uppercase">The Greatest</span>
          <h2 class="mt-6 mb-8 text-5xl lg:text-6xl font-semibold font-heading">Drink bottles and Crates</h2>
          <p class="mb-20 text-lg text-gray-600">Discover more products and inspiration.</p>
          <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
        </div>
        <div class="hidden lg:flex absolute right-0 top-1/2 transform -translate-y-1/2 flex-col items-center">
          <span class="mb-5 font-bold font-heading">01</span>
          <div class="mb-5 h-16 w-px bg-gray-100"></div>
          <button class="mb-5">
            <img src="yofte-assets/elements/circle.svg" alt="">
          </button>
          <button class="mb-6 w-1 h-1 bg-blue-500 rounded-full"></button>
          <button class="mb-6 w-1 h-1 bg-blue-500 rounded-full"></button>
          <div class="h-16 w-px bg-gray-100"></div>
        </div>
      </div>
    </div>
    <div class="py-20 bg-gray-100">
      <div class="flex flex-wrap lg:flex-nowrap mb-20 lg:ml-32 items-end">
        <a class="relative mb-6 lg:mb-0 lg:mr-6 h-56 w-full md:w-1/2 lg:w-1/4 bg-orange-300" href="#">
          <div class="absolute bottom-0 left-0 pb-12 pl-12">
            <span>
              <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.4602 4.53987C23.5326 1.6123 19.6402 0 15.5 0C11.3598 0 7.46743 1.6123 4.5398 4.53987C1.6123 7.46743 0 11.3598 0 15.5C0 19.6402 1.6123 23.5326 4.5398 26.4602C7.46743 29.3877 11.3598 31 15.5 31C19.6402 31 23.5326 29.3877 26.4602 26.4602C29.3877 23.5326 31 19.6402 31 15.5C31 11.3598 29.3877 7.46743 26.4602 4.53987ZM29.1665 16.1902C27.3082 17.6347 25.2499 18.769 23.0419 19.5639C22.0653 19.9155 21.0682 20.1959 20.0559 20.4069C20.0862 18.9115 20.7268 17.4247 21.9424 16.119C25.045 12.7867 26.1273 9.45512 26.4992 7.3556C28.2417 9.69858 29.1836 12.5269 29.1836 15.5C29.1836 15.731 29.1778 15.9611 29.1665 16.1902ZM18.871 23.5119C19.6206 25.2342 20.9605 26.5998 22.4597 27.2872C20.6294 28.3722 18.5674 29.0127 16.4082 29.1532V22.6755C17.1145 22.6488 17.8165 22.5917 18.5133 22.5044C18.6083 22.8457 18.7275 23.1823 18.871 23.5119ZM12.6684 19.3229C12.4097 17.7238 11.6422 16.2294 10.3871 14.8813C8.06811 12.3907 7.03458 9.91316 6.57588 8.27337C6.21211 6.97306 6.14127 5.97767 6.12983 5.52884C8.45586 3.33964 11.4191 2.05333 14.5918 1.8468V20.8598C13.9769 20.8359 13.3657 20.7867 12.7586 20.7131C12.7722 20.2489 12.7429 19.7837 12.6684 19.3229ZM18.2411 20.7075C17.6342 20.7824 17.023 20.8331 16.4082 20.8582V1.8468C19.5809 2.05333 22.5441 3.33964 24.8702 5.5289C24.8587 5.97779 24.7878 6.97318 24.4241 8.27337C23.9654 9.91316 22.9318 12.3907 20.6129 14.8813C19.3577 16.2294 18.5903 17.7238 18.3315 19.3229C18.2573 19.7819 18.228 20.2452 18.2411 20.7075ZM12.4851 22.5097C13.1824 22.5958 13.885 22.6516 14.5918 22.6769V29.1531C12.4327 29.0125 10.3707 28.3721 8.54032 27.2871C10.0395 26.5998 11.3794 25.2341 12.1291 23.5119C12.2717 23.1841 12.3904 22.8492 12.4851 22.5097ZM4.50075 7.35566C4.87275 9.45512 5.95509 12.7867 9.05763 16.1191C10.2759 17.4276 10.9168 18.9179 10.9445 20.4166C9.92557 20.2066 8.92207 19.9262 7.93921 19.5738C5.74039 18.7855 3.6893 17.6607 1.83578 16.2281C1.82319 15.9864 1.81641 15.7438 1.81641 15.5C1.81641 12.5269 2.75827 9.69858 4.50075 7.35566ZM2.19513 18.7155C3.79696 19.773 5.51491 20.6343 7.32617 21.2837C8.42189 21.6765 9.5411 21.9869 10.6776 22.2162C10.6165 22.4076 10.5458 22.5981 10.4635 22.787C9.70451 24.5309 8.13605 25.82 6.66167 25.9465C6.37389 25.7021 6.09416 25.4457 5.82425 25.1758C4.01571 23.3672 2.77668 21.1413 2.19513 18.7155ZM25.1758 25.1758C24.9058 25.4457 24.6261 25.7021 24.3383 25.9465C22.864 25.82 21.2955 24.5309 20.5365 22.787C20.4529 22.5951 20.3812 22.4017 20.3195 22.2073C21.4513 21.9768 22.5659 21.6658 23.6571 21.273C25.4785 20.6172 27.205 19.7473 28.8135 18.679C28.2357 21.119 26.9934 23.3581 25.1758 25.1758Z" fill="white"></path>
              </svg>
            </span>
            <h3 class="mt-6 mb-2 text-3xl font-bold font-heading text-white">For Teams</h3>
            <p class="text-white">134 products</p>
          </div>
        </a>
        <a class="relative mb-6 lg:mb-0 lg:mr-6 h-56 lg:h-72 w-full md:w-1/2 lg:w-1/4 bg-center bg-no-repeat" href="#" style="background-image: url('yofte-assets/images/placeholder-playing-tennis.png'); background-size: cover;">
          <div class="absolute bottom-0 left-0 pb-12 pl-12">
            <span>
              <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0)">
                  <path d="M30.0047 17.5364C26.8441 17.2269 24.3135 16.7834 23.2053 16.3456L15.0572 11.9764V10.7303C15.0572 7.99145 12.829 5.76318 10.0901 5.76318C9.53999 5.76318 9.094 6.20917 9.094 6.75928V10.3473C9.09115 10.3777 9.08995 10.408 9.08989 10.4383C9.08989 10.4392 9.08975 10.44 9.08975 10.4408V10.4418C9.08975 10.4433 9.08962 10.4448 9.08962 10.4462C9.0867 12.4005 7.496 13.9897 5.541 13.9897C3.58421 13.9897 1.99219 12.3977 1.99219 10.4409V9.09724C1.99219 8.54713 1.5462 8.10115 0.996094 8.10115C0.445984 8.10115 0 8.54713 0 9.09724V10.4409V11.5245V17.3339C0 19.066 0.312043 20.765 0.927363 22.384L1.26696 23.2774L0.0511328 26.9249C-0.0500703 27.2287 0.000863282 27.5626 0.188063 27.8223C0.375262 28.0821 0.675949 28.236 0.99616 28.236H29.0195C31.7658 28.236 34.0001 26.0018 34.0001 23.2555V21.5833C34 19.3689 32.2126 17.5642 30.0047 17.5364ZM29.9528 19.5282C31.0859 19.5282 32.0078 20.4501 32.0078 21.5832V22.2594H21.58L24.4707 18.756C26.2649 19.1349 28.4518 19.3868 29.8564 19.5235C29.8884 19.5267 29.9206 19.5282 29.9528 19.5282ZM13.065 10.7303V10.9081L11.0862 9.84704V7.9269C12.2381 8.33742 13.065 9.43917 13.065 10.7303ZM10.8609 11.9867L14.2497 13.8039L13.6158 14.6051C13.2745 15.0366 13.3476 15.663 13.779 16.0043C13.962 16.149 14.1799 16.2192 14.3963 16.2192C14.6904 16.2192 14.9816 16.0896 15.1782 15.8411L16.0333 14.7602L17.27 15.4234L16.6041 16.2653C16.2628 16.6967 16.3359 17.3231 16.7673 17.6644C16.9503 17.8091 17.1682 17.8793 17.3846 17.8793C17.6787 17.8793 17.9699 17.7497 18.1665 17.5012L19.0536 16.3798L22.312 18.127C22.3342 18.139 22.3573 18.1491 22.3804 18.1593L18.9973 22.2594H3.01126L2.78959 21.6762C2.70174 21.4451 2.62179 21.2119 2.54841 20.9772C4.54531 20.6695 6.07929 18.9394 6.07929 16.8577V15.9553C8.35942 15.7344 10.2383 14.1257 10.8609 11.9867ZM4.08711 15.7882V16.8577C4.08711 17.9908 3.21659 18.9238 2.10933 19.0243C2.03157 18.4664 1.99219 17.9022 1.99219 17.3338V14.6932C2.59549 15.1976 3.30736 15.576 4.08711 15.7882ZM29.0195 26.2438H2.37814L3.0422 24.2516H31.8371C31.426 25.4111 30.3182 26.2438 29.0195 26.2438Z" fill="white"></path>
                </g>
                <defs><clipPath id="clip0"><rect width="34" height="34" fill="white"></rect></clipPath></defs>
              </svg>
            </span>
            <h3 class="mt-6 mb-2 text-3xl font-bold font-heading text-white">For Players</h3>
            <p class="text-white">134 products</p>
          </div>
        </a>
        <a class="relative mb-6 md:mb-0 lg:mr-6 h-56 w-full md:w-1/2 lg:w-1/4 bg-indigo-300" href="#">
          <div class="absolute bottom-0 left-0 pb-12 pl-12">
            <span>
              <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.6235 19.2321C11.6235 21.3697 13.3626 23.1087 15.5001 23.1087C17.6377 23.1087 19.3767 21.3697 19.3767 19.2321C19.3767 17.9597 18.7603 16.8286 17.8105 16.1213C18.2842 15.5806 18.5723 14.8733 18.5723 14.0996C18.5723 12.4056 17.1941 11.0273 15.5001 11.0273C13.806 11.0273 12.4278 12.4056 12.4278 14.0996C12.4278 14.8733 12.7159 15.5806 13.1896 16.1213C12.2399 16.8285 11.6235 17.9596 11.6235 19.2321ZM15.5001 21.2923C14.3641 21.2923 13.4399 20.3681 13.4399 19.2321C13.4399 18.0961 14.3642 17.1719 15.5001 17.1719C16.636 17.1719 17.5603 18.0961 17.5603 19.2321C17.5603 20.3681 16.6361 21.2923 15.5001 21.2923ZM14.2442 14.0996C14.2442 13.4071 14.8076 12.8438 15.5001 12.8438C16.1926 12.8438 16.756 13.4071 16.756 14.0996C16.756 14.7921 16.1926 15.3555 15.5001 15.3555C14.8076 15.3555 14.2442 14.7922 14.2442 14.0996Z" fill="white"></path>
                <path d="M26.0011 0H4.99887C2.24247 0 0 2.24254 0 4.99893V19.2729C0 19.7744 0.406633 20.1811 0.908203 20.1811H5.49875V30.0918C5.49875 30.5934 5.90538 31 6.40695 31H24.593C25.0946 31 25.5012 30.5934 25.5012 30.0918V20.1811H30.0918C30.5934 20.1811 31 19.7744 31 19.2729V4.99893C31 2.24254 28.7575 0 26.0011 0V0ZM19.074 1.81641L15.5 5.36203L11.926 1.81641H19.074ZM4.99887 1.81641H9.34686L14.8603 7.28609C15.0374 7.46174 15.2687 7.54953 15.4999 7.54953C15.7312 7.54953 15.9626 7.46174 16.1396 7.28609L21.6531 1.81641H26.0011C27.756 1.81641 29.1836 3.2441 29.1836 4.99893V14.7318H25.5013V11.4434C25.5013 10.9418 25.0946 10.5352 24.5931 10.5352C24.0915 10.5352 23.6848 10.9418 23.6848 11.4434V25.5508H7.31515V11.4434C7.31515 10.9418 6.90852 10.5352 6.40695 10.5352C5.90538 10.5352 5.49875 10.9418 5.49875 11.4434V14.7318H1.81641V4.99893C1.81641 3.2441 3.24404 1.81641 4.99887 1.81641ZM1.81641 18.3647V16.5482H5.49875V18.3647H1.81641ZM7.31515 29.1836V27.3672H23.6848V29.1836H7.31515ZM25.5013 18.3647V16.5482H29.1836V18.3647H25.5013Z" fill="white"></path>
              </svg>
            </span>
            <h3 class="mt-6 mb-2 text-3xl font-bold font-heading text-white">Clothes</h3>
            <p class="text-white">134 products</p>
          </div>
        </a>
        <a class="relative h-56 w-full md:w-1/2 lg:w-1/4 bg-blue-300" href="#">
          <div class="absolute bottom-0 left-0 pb-12 pl-12">
            <span>
              <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0)">
                  <path d="M30.0928 10.6479H13.2367C12.7356 10.6479 12.3295 11.0541 12.3295 11.5551V12.8612C12.3295 13.3525 11.9298 13.7521 11.4385 13.7521C10.9473 13.7521 10.5477 13.3525 10.5477 12.8612V11.5551C10.5477 11.0541 10.1415 10.6479 9.6405 10.6479H8.92987C4.0059 10.6479 0 14.6538 0 19.5778C0 24.5017 4.0059 28.5076 8.92987 28.5076C11.2806 28.5076 13.4998 27.6018 15.1786 25.9568C16.68 24.4859 17.5997 22.5713 17.812 20.504L30.2765 17.9261C30.6978 17.8389 31 17.4679 31 17.0376V11.5551C31 11.0541 30.5938 10.6479 30.0928 10.6479ZM25.5569 12.4623V17.0494L23.7425 17.4247V12.4623H25.5569ZM16.7666 18.8675C16.3525 18.9531 16.0526 19.3135 16.0434 19.7361C16.0027 21.6032 15.2446 23.3521 13.9089 24.6609C12.5713 25.9715 10.803 26.6933 8.92987 26.6933C5.00635 26.6933 1.81438 23.5013 1.81438 19.5778C1.81438 15.7199 4.90014 12.5693 8.73332 12.465V12.8612C8.73332 14.3529 9.94689 15.5665 11.4385 15.5665C12.9303 15.5665 14.1438 14.3529 14.1438 12.8612V12.4623H21.9281V17.8L16.7666 18.8675ZM29.1856 16.2989L27.3712 16.6742V12.4623H29.1856V16.2989Z" fill="white"></path>
                  <path d="M8.9297 16.6929C7.31587 16.6929 6.00293 18.0058 6.00293 19.6196C6.00293 21.2335 7.31587 22.5464 8.9297 22.5464C10.5435 22.5464 11.8565 21.2335 11.8565 19.6196C11.8565 18.0058 10.5435 16.6929 8.9297 16.6929ZM8.9297 20.732C8.31632 20.732 7.81731 20.233 7.81731 19.6196C7.81731 19.0063 8.31632 18.5072 8.9297 18.5072C9.54308 18.5072 10.0422 19.0063 10.0422 19.6196C10.0421 20.233 9.54308 20.732 8.9297 20.732Z" fill="white"></path>
                  <path d="M14.1069 8.88198C14.3391 8.88198 14.5713 8.79337 14.7484 8.61629L16.5343 6.8304C16.8886 6.47617 16.8886 5.90174 16.5343 5.54745C16.1802 5.19317 15.6057 5.19317 15.2514 5.54745L13.4654 7.33334C13.1111 7.68757 13.1111 8.262 13.4654 8.61629C13.6426 8.79343 13.8747 8.88198 14.1069 8.88198Z" fill="white"></path>
                  <path d="M11.3715 6.83229C11.8726 6.83229 12.2787 6.42612 12.2787 5.92511V3.39938C12.2787 2.89837 11.8726 2.49219 11.3715 2.49219C10.8705 2.49219 10.4644 2.89837 10.4644 3.39938V5.92511C10.4644 6.42612 10.8705 6.83229 11.3715 6.83229Z" fill="white"></path>
                  <path d="M7.99399 8.61576C8.17114 8.7929 8.40332 8.88144 8.6355 8.88144C8.86768 8.88144 9.09986 8.79284 9.27694 8.61576C9.63123 8.26153 9.63123 7.6871 9.27694 7.33281L7.49099 5.54692C7.13676 5.19269 6.56233 5.19269 6.20805 5.54692C5.85382 5.90115 5.85382 6.47564 6.20811 6.82987L7.99399 8.61576Z" fill="white"></path>
                </g>
                <defs><clipPath id="clip0"><rect width="31" height="31" fill="white"></rect></clipPath></defs>
              </svg>
            </span>
            <h3 class="mt-6 mb-2 text-3xl font-bold font-heading text-white">Accessories</h3>
            <p class="text-white">134 products</p>
          </div>
        </a>
      </div>
      <div class="max-w-5xl mx-auto flex flex-wrap items-center justify-center -mb-12">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/nike.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/aol.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/north-face.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <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>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Tailwind Component #4

Tailwind CSS

Yofte

<section class="bg-blue-50 bg-opacity-20" 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 justify-between 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-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/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>
        <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="#">Brand</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="#">Photos</a></li>
      </ul>
    </div>
    <div class="hidden xl:flex items-center justify-end mr-12">
      <a class="mr-10 text-white" 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>
        </svg>
      </a>
      <a class="flex items-center" href="#">
        <svg class="text-white mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading text-dark">3</span>
      </a>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l border-blue-200 font-semibold font-heading text-white" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-white" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center text-gray-900 bg-white rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="white"></path>
      </svg>
    </button>
  </nav>
  <div class="container mx-auto px-4 pb-16">
    <div class="flex flex-wrap pt-8 pb-10 items-center">
      <span class="font-semibold font-heading mb-10 lg:mb-0 mr-14">Search items:</span>
      <div class="flex mr-auto mb-10 lg:mb-0 items-center pl-8 bg-white rounded-lg">
        <span class="mr-3">
          <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5 17.6719L12.5042 12.4961" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.27524 14.4082C10.8789 14.4082 13.8002 11.486 13.8002 7.88134C13.8002 4.27666 10.8789 1.35449 7.27524 1.35449C3.67159 1.35449 0.750244 4.27666 0.750244 7.88134C0.750244 11.486 3.67159 14.4082 7.27524 14.4082Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <input class="border-0 focus:ring-transparent focus:outline-none" type="search">
        <button class="inline-flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.125 6.00252L0 1.87752L1.17801 0.699219L6.48102 6.00252L1.17801 11.3058L0 10.1275L4.125 6.00252Z" fill="white"></path>
          </svg>
        </button>
      </div>
      <div>
        <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-blue-300 rounded-full" href="#">
          <svg class="w-4 h-4" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
              <path d="M17.0064 0.554688H0.992752C0.444397 0.554962 -0.000137297 0.999771 3.181e-08 1.54826V17.5619C0.00027469 18.1103 0.445084 18.5548 0.993576 18.5547H17.0064C17.5551 18.5548 17.9999 18.1102 18 17.5615C18 17.5614 18 17.5612 18 17.5611V1.54744C17.9997 0.999084 17.5549 0.55455 17.0064 0.554688Z" fill="white"></path>
              <path d="M12.4277 18.555V11.5941H14.7744L15.126 8.86946H12.4277V7.13417C12.4277 6.34714 12.6462 5.81087 13.7748 5.81087H15.2051V3.38055C14.9562 3.34746 14.1025 3.27344 13.109 3.27344C11.0348 3.27344 9.61523 4.53906 9.61523 6.86432V8.86946H7.27734V11.5941H9.61523V18.555H12.4277Z" fill="#5475E5"></path>
            </g>
            <defs><clipPath id="clip0"><rect width="18" height="18" fill="white" transform="translate(0 0.554688)"></rect></clipPath></defs>
          </svg>
        </a>
        <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-indigo-300 rounded-full" href="#">
          <svg class="w-4 h-4" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
              <path d="M17.9825 5.84674C17.9403 4.89033 17.7857 4.2328 17.5641 3.66305C17.3356 3.05827 16.9839 2.51682 16.5232 2.0667C16.0731 1.60958 15.5281 1.25438 14.9303 1.02939C14.3573 0.807834 13.7032 0.653172 12.7468 0.611003C11.7832 0.565264 11.4773 0.554688 9.03349 0.554688C6.58966 0.554688 6.28377 0.565264 5.32379 0.607432C4.36738 0.6496 3.70985 0.804401 3.14024 1.02582C2.53532 1.25438 1.99387 1.60601 1.54375 2.0667C1.08663 2.51682 0.731567 3.06185 0.50644 3.65962C0.284885 4.2328 0.130222 4.88676 0.0880542 5.84317C0.0423147 6.80672 0.0317383 7.11261 0.0317383 9.55645C0.0317383 12.0003 0.0423147 12.3062 0.0844829 13.2662C0.126651 14.2226 0.281451 14.8801 0.503006 15.4498C0.731567 16.0546 1.08663 16.5961 1.54375 17.0462C1.99387 17.5033 2.5389 17.8585 3.13667 18.0835C3.70985 18.3051 4.36381 18.4597 5.32035 18.5019C6.2802 18.5442 6.58622 18.5546 9.03006 18.5546C11.4739 18.5546 11.7798 18.5442 12.7398 18.5019C13.6962 18.4597 14.3537 18.3051 14.9233 18.0835C16.133 17.6158 17.0894 16.6594 17.5571 15.4498C17.7785 14.8767 17.9333 14.2226 17.9755 13.2662C18.0177 12.3062 18.0282 12.0003 18.0282 9.55645C18.0282 7.11261 18.0247 6.80672 17.9825 5.84674ZM16.3616 13.1958C16.3228 14.0749 16.1752 14.5496 16.0521 14.8661C15.7496 15.6502 15.1273 16.2726 14.3431 16.5751C14.0267 16.6981 13.5485 16.8458 12.6729 16.8844C11.7235 16.9267 11.4387 16.9371 9.03707 16.9371C6.6354 16.9371 6.34709 16.9267 5.40112 16.8844C4.52204 16.8458 4.04734 16.6981 3.73087 16.5751C3.34064 16.4308 2.98544 16.2023 2.69713 15.9034C2.39824 15.6115 2.16968 15.2599 2.02546 14.8696C1.90239 14.5532 1.75473 14.0749 1.71613 13.1994C1.67383 12.25 1.66339 11.9651 1.66339 9.56345C1.66339 7.16178 1.67383 6.87347 1.71613 5.92764C1.75473 5.04856 1.90239 4.57386 2.02546 4.25739C2.16968 3.86703 2.39824 3.51196 2.7007 3.22351C2.99244 2.92463 3.34408 2.69607 3.73444 2.55198C4.05091 2.42891 4.52918 2.28125 5.40469 2.24252C6.35409 2.20035 6.63897 2.18977 9.0405 2.18977C11.4457 2.18977 11.7305 2.20035 12.6764 2.24252C13.5555 2.28125 14.0302 2.42891 14.3467 2.55198C14.7369 2.69607 15.0921 2.92463 15.3804 3.22351C15.6793 3.51539 15.9079 3.86703 16.0521 4.25739C16.1752 4.57386 16.3228 5.052 16.3616 5.92764C16.4037 6.87704 16.4143 7.16178 16.4143 9.56345C16.4143 11.9651 16.4037 12.2464 16.3616 13.1958Z" fill="white"></path>
              <path d="M9.03362 4.93262C6.48086 4.93262 4.40967 7.00367 4.40967 9.55657C4.40967 12.1095 6.48086 14.1805 9.03362 14.1805C11.5865 14.1805 13.6576 12.1095 13.6576 9.55657C13.6576 7.00367 11.5865 4.93262 9.03362 4.93262ZM9.03362 12.556C7.37752 12.556 6.03418 11.2128 6.03418 9.55657C6.03418 7.90033 7.37752 6.55713 9.03362 6.55713C10.6899 6.55713 12.0331 7.90033 12.0331 9.55657C12.0331 11.2128 10.6899 12.556 9.03362 12.556Z" fill="white"></path>
              <path d="M14.9198 4.74989C14.9198 5.34602 14.4365 5.82937 13.8402 5.82937C13.2441 5.82937 12.7607 5.34602 12.7607 4.74989C12.7607 4.15363 13.2441 3.67041 13.8402 3.67041C14.4365 3.67041 14.9198 4.15363 14.9198 4.74989Z" fill="white"></path>
            </g>
            <defs><clipPath id="clip0"><rect width="18" height="18" fill="white" transform="translate(0 0.554688)"></rect></clipPath></defs>
          </svg>
        </a>
        <a class="inline-flex items-center justify-center w-12 h-12 bg-blue-200 rounded-full" href="#">
          <svg class="w-4 h-4" width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 1.97356C17.3306 2.26719 16.6174 2.46181 15.8737 2.55631C16.6388 2.09956 17.2226 1.38181 17.4971 0.516687C16.7839 0.941937 15.9964 1.24231 15.1571 1.40994C14.4799 0.688813 13.5146 0.242188 12.4616 0.242188C10.4186 0.242188 8.77387 1.90044 8.77387 3.93331C8.77387 4.22581 8.79862 4.50706 8.85938 4.77481C5.7915 4.62519 3.07687 3.15481 1.25325 0.914938C0.934875 1.46731 0.748125 2.09956 0.748125 2.78019C0.748125 4.05819 1.40625 5.19106 2.38725 5.84694C1.79437 5.83569 1.21275 5.66356 0.72 5.39244C0.72 5.40369 0.72 5.41831 0.72 5.43294C0.72 7.22619 1.99912 8.71569 3.6765 9.05881C3.37612 9.14094 3.04875 9.18031 2.709 9.18031C2.47275 9.18031 2.23425 9.16681 2.01038 9.11731C2.4885 10.5787 3.84525 11.6531 5.4585 11.6879C4.203 12.6701 2.60888 13.2618 0.883125 13.2618C0.5805 13.2618 0.29025 13.2483 0 13.2112C1.63462 14.2653 3.57188 14.8672 5.661 14.8672C12.4515 14.8672 16.164 9.24219 16.164 4.36644C16.164 4.20331 16.1584 4.04581 16.1505 3.88944C16.8829 3.36969 17.4982 2.72056 18 1.97356Z" fill="white"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-8/12 px-4 mb-6 lg:mb-0">
        <div class="relative h-full bg-white overflow-hidden">
          <img class="absolute right-0 top-0 w-1/2 h-full object-cover" src="yofte-assets/images/women.png" alt="">
          <div class="hidden lg:flex absolute right-0 top-1/2 pr-10 transform -translate-y-1/2 flex-col items-center">
            <span class="mb-5 font-bold font-heading">01</span>
            <div class="mb-5 h-16 w-px bg-gray-100"></div>
            <button class="mb-5">
              <img src="yofte-assets/elements/circle.svg" alt="">
            </button>
            <button class="mb-6 w-1 h-1 bg-blue-500 rounded-full"></button>
            <button class="mb-6 w-1 h-1 bg-blue-500 rounded-full"></button>
            <div class="h-16 w-px bg-gray-100"></div>
          </div>
          <div class="relative max-w-xl pl-6 lg:pl-20 pt-32 pb-24">
            <span class="px-3 py-1 border border-blue-500 rounded-full text-xs text-blue-500 font-bold font-heading uppercase">Bestseller</span>
            <h2 class="mt-6 mb-8 text-5xl lg:text-6xl font-bold font-heading">
              <span>Don’t stop.</span>
              <span class="text-blue-500">Create</span>
              <span>yourself.</span>
            </h2>
            <p class="mb-20 text-lg text-gray-600">Discover more products and inspiration.</p>
            <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-4/12 px-4">
        <a href="#">
          <img class="mb-6" src="yofte-assets/images/placeholder1.png" alt="">
        </a>
        <a href="#">
          <img src="yofte-assets/images/placeholder2.png" alt="">
        </a>
      </div>
    </div>
  </div>
  <div class="py-12 lg:py-24 bg-gray-50">
    <div class="container mx-auto px-4">
      <h4 class="lg:ml-16 mb-6 font-bold font-heading text-gray-500 text-xs">TRUSTED BY BRANDS ALL OVER THE WORLD</h4>
      <div class="flex flex-wrap -mx-3 -mb-3">
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/exxon.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/ea-sports.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/eurosport.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/nike.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/aol.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/north-face.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <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>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Photos</a></li>
      </ul>
    </nav>
  </div>
</section>

Tailwind Component #5

Tailwind CSS

Yofte

<section 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>
        </svg>
      </a>
      <a class="flex items-center" href="#">
        <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="inline-block w-6 h-6 text-center bg-orange-300 rounded-full font-semibold font-heading text-white">3</span>
      </a>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-900" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center text-white bg-orange-300 rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
      </svg>
    </button>
  </nav>
  <div class="relative py-12 bg-blue-300 overflow-hidden">
    <img class="absolute bottom-0 left-0 w-full object-cover" src="yofte-assets/elements/lines.png" alt="">
    <div class="relative container mx-auto px-4">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <div class="px-4 md:px-8 py-12 bg-white">
            <h4 class="pl-8 mb-2 text-xs font-bold font-heading text-gray-500 uppercase">Popular Categories</h4>
            <ul class="mb-5">
              <li class="py-5 px-8 border-b">
                <a class="flex items-center text-lg font-bold font-heading hover:text-blue-300" href="#">
                  <svg class="mr-10" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M27.3137 4.68631C24.2917 1.66431 20.2738 0 16 0C11.7262 0 7.70831 1.66431 4.68625 4.68631C1.66431 7.70831 0 11.7262 0 16C0 20.2738 1.66431 24.2917 4.68625 27.3137C7.70831 30.3357 11.7262 32 16 32C20.2738 32 24.2917 30.3357 27.3137 27.3137C30.3357 24.2917 32 20.2738 32 16C32 11.7262 30.3357 7.70831 27.3137 4.68631ZM30.1074 16.7124C28.1891 18.2036 26.0644 19.3745 23.7852 20.195C22.7771 20.5579 21.7478 20.8474 20.7029 21.0652C20.7341 19.5216 21.3954 17.9868 22.6502 16.639C25.8529 13.1991 26.9701 9.76013 27.3541 7.59288C29.1528 10.0114 30.125 12.931 30.125 16C30.125 16.2384 30.1191 16.4759 30.1074 16.7124ZM19.4797 24.2704C20.2536 26.0482 21.6367 27.4579 23.1842 28.1674C21.2949 29.2874 19.1663 29.9486 16.9375 30.0936V23.4069C17.6666 23.3794 18.3913 23.3205 19.1105 23.2303C19.2086 23.5826 19.3316 23.9301 19.4797 24.2704ZM13.0771 19.9463C12.8101 18.2955 12.0177 16.7529 10.7221 15.3614C8.32837 12.7904 7.2615 10.2329 6.788 8.54025C6.4125 7.198 6.33938 6.1705 6.32756 5.70719C8.72862 3.44738 11.7874 2.11956 15.0625 1.90638V21.5327C14.4278 21.508 13.7968 21.4572 13.1702 21.3813C13.1842 20.9021 13.154 20.4219 13.0771 19.9463ZM18.8296 21.3755C18.2031 21.4527 17.5721 21.5051 16.9375 21.5311V1.90638C20.2126 2.11956 23.2714 3.44738 25.6724 5.70725C25.6606 6.17063 25.5874 7.19812 25.2119 8.54025C24.7384 10.2329 23.6715 12.7904 21.2778 15.3614C19.9822 16.7529 19.1899 18.2955 18.9229 19.9463C18.8462 20.42 18.816 20.8983 18.8296 21.3755ZM12.8879 23.2358C13.6077 23.3247 14.3329 23.3822 15.0625 23.4084V30.0936C12.8337 29.9484 10.7052 29.2874 8.81581 28.1674C10.3634 27.4578 11.7464 26.0481 12.5203 24.2703C12.6676 23.9319 12.7901 23.5863 12.8879 23.2358ZM4.64594 7.59294C5.02994 9.76013 6.14719 13.1992 9.34981 16.6391C10.6074 17.9898 11.2689 19.5282 11.2975 21.0753C10.2457 20.8584 9.20988 20.569 8.19531 20.2052C5.92556 19.3915 3.80831 18.2304 1.895 16.7516C1.882 16.5021 1.875 16.2516 1.875 16C1.875 12.931 2.84725 10.0114 4.64594 7.59294ZM2.26594 19.3192C3.91944 20.4108 5.69281 21.2999 7.5625 21.9702C8.69356 22.3757 9.84888 22.6962 11.0221 22.9329C10.959 23.1304 10.886 23.3271 10.8011 23.5221C10.0176 25.3222 8.3985 26.6529 6.87656 26.7834C6.5795 26.5312 6.29075 26.2665 6.01213 25.9879C4.14525 24.121 2.86625 21.8232 2.26594 19.3192ZM25.9879 25.9879C25.7092 26.2665 25.4205 26.5312 25.1234 26.7834C23.6016 26.6529 21.9825 25.3222 21.1989 23.5221C21.1127 23.324 21.0386 23.1243 20.9749 22.9236C22.1433 22.6857 23.2938 22.3647 24.4202 21.9592C26.3004 21.2823 28.0826 20.3843 29.743 19.2816C29.1465 21.8003 27.8641 24.1116 25.9879 25.9879Z" fill="currentColor"></path>
                  </svg>
                  <span>For Teams</span>
                </a>
              </li>
              <li class="py-5 px-8 border-b">
                <a class="flex items-center text-lg font-bold font-heading hover:text-blue-300" href="#">
                  <svg class="mr-10" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                      <path d="M30.0047 17.5364C26.8441 17.2269 24.3135 16.7834 23.2053 16.3456L15.0572 11.9764V10.7303C15.0572 7.99145 12.829 5.76318 10.0901 5.76318C9.53999 5.76318 9.094 6.20917 9.094 6.75928V10.3473C9.09115 10.3777 9.08995 10.408 9.08989 10.4383C9.08989 10.4392 9.08975 10.44 9.08975 10.4408V10.4418C9.08975 10.4433 9.08962 10.4448 9.08962 10.4462C9.0867 12.4005 7.496 13.9897 5.541 13.9897C3.58421 13.9897 1.99219 12.3977 1.99219 10.4409V9.09724C1.99219 8.54713 1.5462 8.10115 0.996094 8.10115C0.445984 8.10115 0 8.54713 0 9.09724V10.4409V11.5245V17.3339C0 19.066 0.312043 20.765 0.927363 22.384L1.26696 23.2774L0.0511328 26.9249C-0.0500703 27.2287 0.000863282 27.5626 0.188063 27.8223C0.375262 28.0821 0.675949 28.236 0.99616 28.236H29.0195C31.7658 28.236 34.0001 26.0018 34.0001 23.2555V21.5833C34 19.3689 32.2126 17.5642 30.0047 17.5364ZM29.9528 19.5282C31.0859 19.5282 32.0078 20.4501 32.0078 21.5832V22.2594H21.58L24.4707 18.756C26.2649 19.1349 28.4518 19.3868 29.8564 19.5235C29.8884 19.5267 29.9206 19.5282 29.9528 19.5282ZM13.065 10.7303V10.9081L11.0862 9.84704V7.9269C12.2381 8.33742 13.065 9.43917 13.065 10.7303ZM10.8609 11.9867L14.2497 13.8039L13.6158 14.6051C13.2745 15.0366 13.3476 15.663 13.779 16.0043C13.962 16.149 14.1799 16.2192 14.3963 16.2192C14.6904 16.2192 14.9816 16.0896 15.1782 15.8411L16.0333 14.7602L17.27 15.4234L16.6041 16.2653C16.2628 16.6967 16.3359 17.3231 16.7673 17.6644C16.9503 17.8091 17.1682 17.8793 17.3846 17.8793C17.6787 17.8793 17.9699 17.7497 18.1665 17.5012L19.0536 16.3798L22.312 18.127C22.3342 18.139 22.3573 18.1491 22.3804 18.1593L18.9973 22.2594H3.01126L2.78959 21.6762C2.70174 21.4451 2.62179 21.2119 2.54841 20.9772C4.54531 20.6695 6.07929 18.9394 6.07929 16.8577V15.9553C8.35942 15.7344 10.2383 14.1257 10.8609 11.9867ZM4.08711 15.7882V16.8577C4.08711 17.9908 3.21659 18.9238 2.10933 19.0243C2.03157 18.4664 1.99219 17.9022 1.99219 17.3338V14.6932C2.59549 15.1976 3.30736 15.576 4.08711 15.7882ZM29.0195 26.2438H2.37814L3.0422 24.2516H31.8371C31.426 25.4111 30.3182 26.2438 29.0195 26.2438Z" fill="currentColor"></path>
                    </g>
                    <defs><clipPath id="clip0"><rect width="34" height="34" fill="white"></rect></clipPath></defs>
                  </svg>
                  <span>For Players</span>
                </a>
              </li>
              <li class="py-5 px-8 border-b">
                <a class="flex items-center text-lg font-bold font-heading hover:text-blue-300" href="#">
                  <svg class="mr-10" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.9983 19.8525C11.9983 22.059 13.7934 23.8541 15.9999 23.8541C18.2064 23.8541 20.0015 22.059 20.0015 19.8525C20.0015 18.539 19.3652 17.3714 18.3849 16.6414C18.8739 16.0832 19.1712 15.3531 19.1712 14.5544C19.1712 12.8057 17.7485 11.3831 15.9999 11.3831C14.2512 11.3831 12.8285 12.8057 12.8285 14.5544C12.8285 15.3531 13.1259 16.0832 13.6149 16.6414C12.6345 17.3714 11.9983 18.5389 11.9983 19.8525ZM15.9999 21.9791C14.8273 21.9791 13.8733 21.0251 13.8733 19.8525C13.8733 18.6799 14.8274 17.7259 15.9999 17.7259C17.1725 17.7259 18.1265 18.6799 18.1265 19.8525C18.1265 21.0251 17.1725 21.9791 15.9999 21.9791ZM14.7035 14.5544C14.7035 13.8396 15.2851 13.2581 15.9999 13.2581C16.7147 13.2581 17.2963 13.8396 17.2963 14.5544C17.2963 15.2692 16.7148 15.8509 15.9999 15.8509C15.285 15.8509 14.7035 15.2693 14.7035 14.5544Z" fill="currentColor"></path>
                    <path d="M26.8399 0H5.16012C2.31481 0 0 2.31488 0 5.16019V19.8946C0 20.4123 0.41975 20.8321 0.9375 20.8321H5.67613V31.0625C5.67613 31.5802 6.09587 32 6.61363 32H25.3863C25.9041 32 26.3238 31.5802 26.3238 31.0625V20.8321H31.0625C31.5802 20.8321 32 20.4123 32 19.8946V5.16019C32 2.31488 29.6852 0 26.8399 0V0ZM19.6893 1.875L16 5.535L12.3108 1.875H19.6893ZM5.16012 1.875H9.64837L15.3397 7.52112C15.5224 7.70244 15.7612 7.79306 15.9999 7.79306C16.2387 7.79306 16.4775 7.70244 16.6602 7.52112L22.3516 1.875H26.8399C28.6513 1.875 30.125 3.34875 30.125 5.16019V15.2071H26.3239V11.8126C26.3239 11.2948 25.9041 10.8751 25.3864 10.8751C24.8686 10.8751 24.4489 11.2948 24.4489 11.8126V26.375H7.55113V11.8126C7.55113 11.2948 7.13138 10.8751 6.61363 10.8751C6.09587 10.8751 5.67613 11.2948 5.67613 11.8126V15.2071H1.875V5.16019C1.875 3.34875 3.34869 1.875 5.16012 1.875ZM1.875 18.9571V17.0821H5.67613V18.9571H1.875ZM7.55113 30.125V28.25H24.4488V30.125H7.55113ZM26.3239 18.9571V17.0821H30.125V18.9571H26.3239Z" fill="currentColor"></path>
                  </svg>
                  <span>Clothes</span>
                </a>
              </li>
              <li class="py-5 px-8 border-b">
                <a class="flex items-center text-lg font-bold font-heading hover:text-blue-300" href="#">
                  <svg class="mr-10" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                      <path d="M31.0761 10.6662C29.6513 6.63922 26.7437 3.40816 22.8888 1.56812C19.0339 -0.271854 14.6932 -0.50061 10.6663 0.924145C6.63937 2.3489 3.40838 5.2565 1.56834 9.11142C-0.271636 12.9663 -0.500329 17.307 0.924363 21.3339C2.34912 25.3609 5.25672 28.5919 9.11158 30.4319C11.2964 31.4748 13.6373 32.0001 15.9887 32.0001C17.786 32.0001 19.5895 31.6932 21.3341 31.0759C25.361 29.6512 28.5921 26.7436 30.4321 22.8887C32.2721 19.0338 32.5008 14.693 31.0761 10.6662ZM28.7409 22.0814C28.655 22.2613 28.5649 22.4384 28.4723 22.6135L27.6404 19.9552L29.9305 18.3259C29.714 19.6107 29.3176 20.8731 28.7409 22.0814ZM30.1236 15.8885L26.3903 18.5446L21.2024 16.7848L19.7955 12.4546L23.0803 8.01924L27.6822 8.06428C28.352 9.05376 28.9003 10.135 29.3094 11.2912C29.8404 12.792 30.1101 14.3421 30.1236 15.8885ZM16.0022 19.5993L12.6494 17.1633L13.9301 13.2219H18.0743L19.355 17.1633L16.0022 19.5993ZM10.8019 16.7851L5.61472 18.5446L1.87618 15.8848C1.89161 13.8443 2.35443 11.8149 3.25958 9.91862C3.56973 9.26884 3.92498 8.64973 4.32108 8.06422L8.92411 8.01918L12.209 12.4545L10.8019 16.7851ZM26.1473 6.17515L23.3017 6.14729L22.4526 3.4437C23.8436 4.15727 25.0863 5.08053 26.1473 6.17515ZM20.1979 2.51862L21.5749 6.90326L18.2831 11.3479H13.7213L10.4296 6.90326L11.806 2.52012C13.1849 2.08972 14.5995 1.87502 16.0103 1.87502C17.4239 1.87502 18.8334 2.09066 20.1979 2.51862ZM9.55335 3.4387L8.70273 6.14729L5.85291 6.17515C6.92122 5.06979 8.16776 4.14627 9.55335 3.4387ZM2.07164 18.3238L4.36462 19.9552L3.52962 22.6236C3.20648 22.0121 2.92588 21.3728 2.69094 20.7089C2.41365 19.9248 2.20744 19.1272 2.07164 18.3238ZM4.85199 24.673L6.21397 20.3202L11.3898 18.5645L15.0651 21.2349V26.6548L11.3711 29.3387C10.8799 29.1672 10.3951 28.968 9.91878 28.7406C7.90402 27.779 6.18249 26.3866 4.85199 24.673ZM13.7318 29.94L16.0022 28.2904L18.269 29.9373C17.5124 30.0621 16.7507 30.125 15.9901 30.125C15.2341 30.125 14.4793 30.0627 13.7318 29.94ZM20.7091 29.3092C20.6828 29.3185 20.6563 29.3272 20.6299 29.3363L16.9392 26.6548V21.235L20.6149 18.5644L25.7911 20.3202L27.1506 24.6653C25.5102 26.7849 23.296 28.394 20.7091 29.3092Z" fill="currentColor"></path>
                    </g>
                    <defs><clipPath id="clip0"><rect width="32" height="32" fill="white"></rect></clipPath></defs>
                  </svg>
                  <span>Football</span>
                </a>
              </li>
              <li class="py-5 px-8">
                <a class="flex items-center text-lg font-bold font-heading hover:text-blue-300" href="#">
                  <svg class="mr-10" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                      <path d="M31.0635 10.9912H13.6636C13.1465 10.9912 12.7272 11.4105 12.7272 11.9277V13.2758C12.7272 13.783 12.3147 14.1955 11.8075 14.1955C11.3004 14.1955 10.8879 13.783 10.8879 13.2758V11.9277C10.8879 11.4105 10.4687 10.9912 9.95149 10.9912H9.21793C4.13512 10.9912 0 15.1263 0 20.2091C0 25.2919 4.13512 29.427 9.21793 29.427C11.6445 29.427 13.9353 28.4919 15.6683 26.7939C17.218 25.2755 18.1675 23.2992 18.3866 21.1652L31.2532 18.5041C31.6881 18.4142 32 18.0311 32 17.587V11.9277C32 11.4105 31.5807 10.9912 31.0635 10.9912ZM26.3813 12.8641V17.5992L24.5084 17.9866V12.8641H26.3813ZM17.3074 19.4759C16.88 19.5643 16.5704 19.9363 16.5609 20.3725C16.5189 22.2998 15.7364 24.1052 14.3576 25.4561C12.9768 26.8091 11.1515 27.5541 9.21793 27.5541C5.16784 27.5542 1.8729 24.2592 1.8729 20.2091C1.8729 16.2268 5.05821 12.9745 9.01504 12.8669V13.2758C9.01504 14.8157 10.2678 16.0684 11.8075 16.0684C13.3474 16.0684 14.6001 14.8157 14.6001 13.2758V12.8641H22.6354V18.3739L17.3074 19.4759ZM30.1271 16.8244L28.2542 17.2118V12.8641H30.1271V16.8244Z" fill="currentColor"></path>
                      <path d="M9.21771 17.2312C7.55183 17.2312 6.19653 18.5865 6.19653 20.2524C6.19653 21.9183 7.55183 23.2736 9.21771 23.2736C10.8836 23.2736 12.239 21.9183 12.239 20.2524C12.2389 18.5865 10.8836 17.2312 9.21771 17.2312ZM9.21771 21.4007C8.58455 21.4007 8.06944 20.8855 8.06944 20.2524C8.06944 19.6192 8.58455 19.1041 9.21771 19.1041C9.85088 19.1041 10.3661 19.6192 10.3661 20.2524C10.366 20.8855 9.85088 21.4007 9.21771 21.4007Z" fill="currentColor"></path>
                      <path d="M14.5622 9.16828C14.8018 9.16828 15.0416 9.07682 15.2244 8.89402L17.0679 7.05052C17.4336 6.68487 17.4336 6.09191 17.0679 5.72619C16.7023 5.36048 16.1094 5.36048 15.7436 5.72619L13.9 7.56969C13.5343 7.93534 13.5343 8.52831 13.9 8.89402C14.0829 9.07688 14.3225 9.16828 14.5622 9.16828Z" fill="currentColor"></path>
                      <path d="M11.7385 7.05262C12.2556 7.05262 12.6749 6.63334 12.6749 6.11617V3.50896C12.6749 2.99179 12.2556 2.57251 11.7385 2.57251C11.2213 2.57251 10.802 2.99179 10.802 3.50896V6.11617C10.802 6.63334 11.2213 7.05262 11.7385 7.05262Z" fill="currentColor"></path>
                      <path d="M8.25207 8.89373C8.43493 9.07659 8.6746 9.16799 8.91427 9.16799C9.15394 9.16799 9.3936 9.07653 9.5764 8.89373C9.94212 8.52808 9.94212 7.93512 9.5764 7.5694L7.73284 5.7259C7.36719 5.36025 6.77422 5.36025 6.40851 5.7259C6.04286 6.09155 6.04286 6.68458 6.40857 7.05023L8.25207 8.89373Z" fill="currentColor"></path>
                    </g>
                    <defs><clipPath id="clip0"><rect width="32" height="32" fill="white"></rect></clipPath></defs>
                  </svg>
                  <span>Accessories</span>
                </a>
              </li>
            </ul>
            <a class="inline-block w-full" href="#">
              <svg class="mx-auto" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.5 5.09179L11.5558 -6.31273e-08L13 1.4541L6.5 8L-6.35609e-08 1.4541L1.44419 -5.05121e-07L6.5 5.09179Z" fill="#9A97A7"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-2/3 px-4">
          <div class="flex flex-wrap h-full">
            <div class="w-full md:w-7/12">
              <img class="h-64 md:h-full w-full object-cover" src="yofte-assets/images/placeholder4.png" alt="">
            </div>
            <div class="w-full md:w-5/12">
              <img class="md:mt-16 md:-ml-16 w-full h-64 md:h-full object-cover object-top" src="yofte-assets/images/placeholder3.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="relative container mx-auto px-4">
    <div class="text-center mt-16 xl:mt-24 xl:mr-8 xl:absolute top-0 right-0 xl:transform xl:-translate-y-1/2">
      <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-blue-300 rounded-full" href="#">
        <svg class="w-4 h-4" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0)">
            <path d="M17.0064 0.554688H0.992752C0.444397 0.554962 -0.000137297 0.999771 3.181e-08 1.54826V17.5619C0.00027469 18.1103 0.445084 18.5548 0.993576 18.5547H17.0064C17.5551 18.5548 17.9999 18.1102 18 17.5615C18 17.5614 18 17.5612 18 17.5611V1.54744C17.9997 0.999084 17.5549 0.55455 17.0064 0.554688Z" fill="white"></path>
            <path d="M12.4277 18.555V11.5941H14.7744L15.126 8.86946H12.4277V7.13417C12.4277 6.34714 12.6462 5.81087 13.7748 5.81087H15.2051V3.38055C14.9562 3.34746 14.1025 3.27344 13.109 3.27344C11.0348 3.27344 9.61523 4.53906 9.61523 6.86432V8.86946H7.27734V11.5941H9.61523V18.555H12.4277Z" fill="#5475E5"></path>
          </g>
          <defs><clipPath id="clip0"><rect width="18" height="18" fill="white" transform="translate(0 0.554688)"></rect></clipPath></defs>
        </svg>
      </a>
      <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-indigo-300 rounded-full" href="#">
        <svg class="w-4 h-4" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0)">
            <path d="M17.9825 5.84674C17.9403 4.89033 17.7857 4.2328 17.5641 3.66305C17.3356 3.05827 16.9839 2.51682 16.5232 2.0667C16.0731 1.60958 15.5281 1.25438 14.9303 1.02939C14.3573 0.807834 13.7032 0.653172 12.7468 0.611003C11.7832 0.565264 11.4773 0.554688 9.03349 0.554688C6.58966 0.554688 6.28377 0.565264 5.32379 0.607432C4.36738 0.6496 3.70985 0.804401 3.14024 1.02582C2.53532 1.25438 1.99387 1.60601 1.54375 2.0667C1.08663 2.51682 0.731567 3.06185 0.50644 3.65962C0.284885 4.2328 0.130222 4.88676 0.0880542 5.84317C0.0423147 6.80672 0.0317383 7.11261 0.0317383 9.55645C0.0317383 12.0003 0.0423147 12.3062 0.0844829 13.2662C0.126651 14.2226 0.281451 14.8801 0.503006 15.4498C0.731567 16.0546 1.08663 16.5961 1.54375 17.0462C1.99387 17.5033 2.5389 17.8585 3.13667 18.0835C3.70985 18.3051 4.36381 18.4597 5.32035 18.5019C6.2802 18.5442 6.58622 18.5546 9.03006 18.5546C11.4739 18.5546 11.7798 18.5442 12.7398 18.5019C13.6962 18.4597 14.3537 18.3051 14.9233 18.0835C16.133 17.6158 17.0894 16.6594 17.5571 15.4498C17.7785 14.8767 17.9333 14.2226 17.9755 13.2662C18.0177 12.3062 18.0282 12.0003 18.0282 9.55645C18.0282 7.11261 18.0247 6.80672 17.9825 5.84674ZM16.3616 13.1958C16.3228 14.0749 16.1752 14.5496 16.0521 14.8661C15.7496 15.6502 15.1273 16.2726 14.3431 16.5751C14.0267 16.6981 13.5485 16.8458 12.6729 16.8844C11.7235 16.9267 11.4387 16.9371 9.03707 16.9371C6.6354 16.9371 6.34709 16.9267 5.40112 16.8844C4.52204 16.8458 4.04734 16.6981 3.73087 16.5751C3.34064 16.4308 2.98544 16.2023 2.69713 15.9034C2.39824 15.6115 2.16968 15.2599 2.02546 14.8696C1.90239 14.5532 1.75473 14.0749 1.71613 13.1994C1.67383 12.25 1.66339 11.9651 1.66339 9.56345C1.66339 7.16178 1.67383 6.87347 1.71613 5.92764C1.75473 5.04856 1.90239 4.57386 2.02546 4.25739C2.16968 3.86703 2.39824 3.51196 2.7007 3.22351C2.99244 2.92463 3.34408 2.69607 3.73444 2.55198C4.05091 2.42891 4.52918 2.28125 5.40469 2.24252C6.35409 2.20035 6.63897 2.18977 9.0405 2.18977C11.4457 2.18977 11.7305 2.20035 12.6764 2.24252C13.5555 2.28125 14.0302 2.42891 14.3467 2.55198C14.7369 2.69607 15.0921 2.92463 15.3804 3.22351C15.6793 3.51539 15.9079 3.86703 16.0521 4.25739C16.1752 4.57386 16.3228 5.052 16.3616 5.92764C16.4037 6.87704 16.4143 7.16178 16.4143 9.56345C16.4143 11.9651 16.4037 12.2464 16.3616 13.1958Z" fill="white"></path>
            <path d="M9.03362 4.93262C6.48086 4.93262 4.40967 7.00367 4.40967 9.55657C4.40967 12.1095 6.48086 14.1805 9.03362 14.1805C11.5865 14.1805 13.6576 12.1095 13.6576 9.55657C13.6576 7.00367 11.5865 4.93262 9.03362 4.93262ZM9.03362 12.556C7.37752 12.556 6.03418 11.2128 6.03418 9.55657C6.03418 7.90033 7.37752 6.55713 9.03362 6.55713C10.6899 6.55713 12.0331 7.90033 12.0331 9.55657C12.0331 11.2128 10.6899 12.556 9.03362 12.556Z" fill="white"></path>
            <path d="M14.9198 4.74989C14.9198 5.34602 14.4365 5.82937 13.8402 5.82937C13.2441 5.82937 12.7607 5.34602 12.7607 4.74989C12.7607 4.15363 13.2441 3.67041 13.8402 3.67041C14.4365 3.67041 14.9198 4.15363 14.9198 4.74989Z" fill="white"></path>
          </g>
          <defs><clipPath id="clip0"><rect width="18" height="18" fill="white" transform="translate(0 0.554688)"></rect></clipPath></defs>
        </svg>
      </a>
      <a class="inline-flex items-center justify-center w-12 h-12 bg-blue-300 rounded-full" href="#">
        <svg class="w-4 h-4" width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 1.97356C17.3306 2.26719 16.6174 2.46181 15.8737 2.55631C16.6388 2.09956 17.2226 1.38181 17.4971 0.516687C16.7839 0.941937 15.9964 1.24231 15.1571 1.40994C14.4799 0.688813 13.5146 0.242188 12.4616 0.242188C10.4186 0.242188 8.77387 1.90044 8.77387 3.93331C8.77387 4.22581 8.79862 4.50706 8.85938 4.77481C5.7915 4.62519 3.07687 3.15481 1.25325 0.914938C0.934875 1.46731 0.748125 2.09956 0.748125 2.78019C0.748125 4.05819 1.40625 5.19106 2.38725 5.84694C1.79437 5.83569 1.21275 5.66356 0.72 5.39244C0.72 5.40369 0.72 5.41831 0.72 5.43294C0.72 7.22619 1.99912 8.71569 3.6765 9.05881C3.37612 9.14094 3.04875 9.18031 2.709 9.18031C2.47275 9.18031 2.23425 9.16681 2.01038 9.11731C2.4885 10.5787 3.84525 11.6531 5.4585 11.6879C4.203 12.6701 2.60888 13.2618 0.883125 13.2618C0.5805 13.2618 0.29025 13.2483 0 13.2112C1.63462 14.2653 3.57188 14.8672 5.661 14.8672C12.4515 14.8672 16.164 9.24219 16.164 4.36644C16.164 4.20331 16.1584 4.04581 16.1505 3.88944C16.8829 3.36969 17.4982 2.72056 18 1.97356Z" fill="white"></path>
        </svg>
      </a>
    </div>
    <div class="max-w-3xl mx-auto py-24 text-center">
      <h2 class="mb-8 text-5xl xl:text-6xl font-bold font-heading">Don't stop. Create yourself.</h2>
      <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
    </div>
  </div>
  <div class="py-12 lg:py-24 bg-gray-50">
    <div class="container mx-auto px-4">
      <h4 class="lg:ml-16 mb-6 font-bold font-heading text-gray-500 text-xs">TRUSTED BY BRANDS ALL OVER THE WORLD</h4>
      <div class="flex flex-wrap -mx-3 -mb-3">
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/exxon.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/ea-sports.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/eurosport.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/nike.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/aol.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/6 p-3">
          <div class="h-28 flex items-center bg-white shadow-xl">
            <img class="mx-auto" src="yofte-assets/brands/north-face.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <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>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Tailwind Component #6

Tailwind CSS

Yofte

<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-20 text-5xl font-bold font-heading">Your cart</h2>
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full xl:w-8/12 mb-8 xl:mb-0 px-4">
          <div class="hidden lg:flex w-full">
            <div class="w-full lg:w-3/6">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Description</h4>
            </div>
            <div class="w-full lg:w-1/6">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Price</h4>
            </div>
            <div class="w-full lg:w-1/6 text-center">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Quantity</h4>
            </div>
            <div class="w-full lg:w-1/6 text-right">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Subtotal</h4>
            </div>
          </div>
          <div class="mb-12 py-6 border-t border-b border-gray-200">
            <div class="flex flex-wrap items-center -mx-4 mb-6 md:mb-3">
              <div class="w-full md:w-4/6 lg:w-6/12 px-4 mb-6 md:mb-0">
                <div class="flex -mx-4 flex-wrap items-center">
                  <div class="w-full md:w-1/3 px-4 mb-3">
                    <div class="flex items-center justify-center w-full md:w-24 h-32 bg-gray-100">
                      <img class="h-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
                    </div>
                  </div>
                  <div class="w-2/3 px-4">
                    <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter carafe</h3>
                    <p class="text-gray-500">Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="hidden lg:block lg:w-2/12 px-4">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
                <span class="text-xs text-gray-500 line-through">$33.69</span>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4">
                <div class="inline-flex items-center px-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" x-data="{ quantity: 1 }">
                  <button x-on:click="quantity > 1 ? quantity-- : quantity" class="py-2 hover:text-gray-700">
                    <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                  </button>
                  <input class="w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md" type="number" x-model="quantity" placeholder="1">
                  <button x-on:click="quantity++" class="py-2 hover:text-gray-700">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                  </button>
                </div>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4 text-right">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
              </div>
            </div>
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-4/6 lg:w-6/12 px-4 mb-6 md:mb-0">
                <div class="flex -mx-4 flex-wrap items-center">
                  <div class="w-full md:w-1/3 px-4 mb-3">
                    <div class="flex items-center justify-center w-full md:w-24 h-32 bg-gray-100">
                      <img class="h-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                    </div>
                  </div>
                  <div class="w-full md:w-2/3 px-4">
                    <h3 class="mb-2 text-xl font-bold font-heading">Nike basketball ball</h3>
                    <p class="text-gray-500">Lorem ipsum dolor L</p>
                  </div>
                </div>
              </div>
              <div class="hidden lg:block lg:w-2/12 px-4">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
                <span class="text-xs text-gray-500 line-through">$33.69</span>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4">
                <div class="inline-flex items-center px-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" x-data="{ quantity: 1 }">
                    <button x-on:click="quantity > 1 ? quantity-- : quantity" class="py-2 hover:text-gray-700">
                      <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                    </button>
                    <input class="w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md" type="number" x-model="quantity" placeholder="1">
                    <button x-on:click="quantity++" class="py-2 hover:text-gray-700">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                    </button>
                </div>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4 text-right">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap items-center lg:-mb-4">
            <span class="mr-12 mb-4 font-medium">Apply discount code:</span>
            <input class="flex-1 md:flex-none mr-6 sm:mr-0 md:mr-6 mb-4 px-8 py-4 placeholder-gray-800 font-bold font-heading border rounded-md" type="text" placeholder="SUMMER30X">
            <a class="flex-1 md:flex-none inline-block mb-4 px-8 py-4 text-center text-white font-bold font-heading uppercase bg-gray-800 hover:bg-gray-700 rounded-md" href="#">Apply</a>
          </div>
        </div>
        <div class="w-full xl:w-4/12 px-4">
          <div class="p-6 md:p-12 bg-blue-300">
            <h2 class="mb-6 text-4xl font-bold font-heading text-white">Cart totals</h2>
            <div class="flex mb-8 items-center justify-between pb-5 border-b border-blue-100">
              <span class="text-blue-50">Subtotal</span>
              <span class="text-xl font-bold font-heading text-white">$89.67</span>
            </div>
            <h4 class="mb-2 text-xl font-bold font-heading text-white">Shipping</h4>
            <div class="flex mb-2 justify-between items-center">
              <span class="text-blue-50">Next day</span>
              <span class="text-xl font-bold font-heading text-white">$11.00</span>
            </div>
            <div class="flex mb-10 justify-between items-center">
              <span class="text-blue-50">Shipping to United States</span>
              <span class="text-xl font-bold font-heading text-white">-</span>
            </div>
            <div class="flex mb-10 justify-between items-center">
              <span class="text-xl font-bold font-heading text-white">Order total</span>
              <span class="text-xl font-bold font-heading text-white">$100.67</span>
            </div>
            <a class="block w-full py-4 bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading uppercase rounded-md transition duration-200" href="#">Go to Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #7

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="mb-8 text-5xl font-bold font-heading">Order History</h2>
    <p class="mb-14 text-lg text-gray-500">Recent Orders dolor sit amet consectutar</p>
    <div class="mb-12 py-8 px-8 md:px-20 bg-white">
      <div class="flex flex-wrap mb-8 pb-4 border-b">
        <div class="mr-20">
          <h3 class="text-gray-600">Order Number</h3>
          <p class="text-blue-300 font-bold font-heading">XYZ0864395</p>
        </div>
        <div class="mr-auto">
          <h3 class="text-gray-600">Date</h3>
          <p class="text-blue-300 font-bold font-heading">June 05, 2021</p>
        </div>
        <a class="inline-flex mt-6 md:mt-0 w-full lg:w-auto justify-center items-center py-4 px-6 border hover:border-gray-500 rounded-md font-bold font-heading" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 1V0.25C0.585786 0.25 0.25 0.585786 0.25 1L1 1ZM15 19V19.75C15.4142 19.75 15.75 19.4142 15.75 19H15ZM1 19H0.25C0.25 19.4142 0.585786 19.75 1 19.75L1 19ZM10 1L10.5303 0.46967C10.3897 0.329018 10.1989 0.25 10 0.25V1ZM15 6H15.75C15.75 5.80109 15.671 5.61032 15.5303 5.46967L15 6ZM15 18.25H1V19.75H15V18.25ZM1.75 19V1H0.25V19H1.75ZM1 1.75H10V0.25H1V1.75ZM14.25 6V19H15.75V6H14.25ZM9.46967 1.53033L14.4697 6.53033L15.5303 5.46967L10.5303 0.46967L9.46967 1.53033ZM8.25 1V5H9.75V1H8.25ZM11 7.75H15V6.25H11V7.75ZM8.25 5C8.25 6.51878 9.48122 7.75 11 7.75V6.25C10.3096 6.25 9.75 5.69036 9.75 5H8.25Z" fill="black"></path>
          </svg>
          <span class="ml-4">View Invoice</span>
        </a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/waterbottle.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">BRILE water filter carafe</h3>
              <p class="text-gray-500">Maecenas 0.7 commodo sit</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-10">
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Ordered on</h4>
              <p class="text-gray-500">07/17/2021</p>
            </div>
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivered</h4>
              <p class="text-gray-500">07/23/2021</p>
            </div>
            <div class="w-full lg:w-auto ml-auto px-10"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 mr-4 bg-gray-100 hover:bg-gray-200 text-center font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">View summary</a><a class="inline-block w-full md:w-auto bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy again</a></div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/basketball.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">NIKE Basketball Ball</h3>
              <p class="text-gray-500">Lorem ipsum dolor size L</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-10">
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Ordered on</h4>
              <p class="text-gray-500">07/17/2021</p>
            </div>
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivered</h4>
              <p class="text-gray-500">07/23/2021</p>
            </div>
            <div class="w-full lg:w-auto ml-auto px-10"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 mr-4 bg-gray-100 hover:bg-gray-200 text-center font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">View summary</a><a class="inline-block w-full md:w-auto bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy again</a></div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/backpack.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">Backpack Travel</h3>
              <p class="text-gray-500">Maecenas commodo libero ut molestie dictum. Morbi placerat eros id porttitor sagittis.</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-10">
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Ordered on</h4>
              <p class="text-gray-500">07/17/2021</p>
            </div>
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivered</h4>
              <p class="text-gray-500">07/23/2021</p>
            </div>
            <div class="w-full lg:w-auto ml-auto px-10"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 mr-4 bg-gray-100 hover:bg-gray-200 text-center font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">View summary</a><a class="inline-block w-full md:w-auto bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy again</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-8 px-8 md:px-20 bg-white">
      <div class="flex flex-wrap mb-8 pb-4 border-b">
        <div class="mr-20">
          <h3 class="text-gray-600">Order Number</h3>
          <p class="text-blue-300 font-bold font-heading">XYZ0864395</p>
        </div>
        <div class="mr-auto">
          <h3 class="text-gray-600">Date</h3>
          <p class="text-blue-300 font-bold font-heading">June 05, 2021</p>
        </div>
        <a class="inline-flex mt-6 md:mt-0 w-full lg:w-auto justify-center items-center py-4 px-6 border hover:border-gray-500 rounded-md font-bold font-heading" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 1V0.25C0.585786 0.25 0.25 0.585786 0.25 1L1 1ZM15 19V19.75C15.4142 19.75 15.75 19.4142 15.75 19H15ZM1 19H0.25C0.25 19.4142 0.585786 19.75 1 19.75L1 19ZM10 1L10.5303 0.46967C10.3897 0.329018 10.1989 0.25 10 0.25V1ZM15 6H15.75C15.75 5.80109 15.671 5.61032 15.5303 5.46967L15 6ZM15 18.25H1V19.75H15V18.25ZM1.75 19V1H0.25V19H1.75ZM1 1.75H10V0.25H1V1.75ZM14.25 6V19H15.75V6H14.25ZM9.46967 1.53033L14.4697 6.53033L15.5303 5.46967L10.5303 0.46967L9.46967 1.53033ZM8.25 1V5H9.75V1H8.25ZM11 7.75H15V6.25H11V7.75ZM8.25 5C8.25 6.51878 9.48122 7.75 11 7.75V6.25C10.3096 6.25 9.75 5.69036 9.75 5H8.25Z" fill="black"></path>
          </svg>
          <span class="ml-4">View Invoice</span>
        </a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/waterbottle.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">BRILE water filter carafe</h3>
              <p class="text-gray-500">Maecenas 0.7 commodo sit</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-10">
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Ordered on</h4>
              <p class="text-gray-500">07/17/2021</p>
            </div>
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivered</h4>
              <p class="text-gray-500">07/23/2021</p>
            </div>
            <div class="w-full lg:w-auto ml-auto px-10"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 mr-4 bg-gray-100 hover:bg-gray-200 text-center font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">View summary</a><a class="inline-block w-full md:w-auto bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy again</a></div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/basketball.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">NIKE Basketball Ball</h3>
              <p class="text-gray-500">Lorem ipsum dolor size L</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-10">
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Ordered on</h4>
              <p class="text-gray-500">07/17/2021</p>
            </div>
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivered</h4>
              <p class="text-gray-500">07/23/2021</p>
            </div>
            <div class="w-full lg:w-auto ml-auto px-10"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 mr-4 bg-gray-100 hover:bg-gray-200 text-center font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">View summary</a><a class="inline-block w-full md:w-auto bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy again</a></div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/backpack.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">Backpack Travel</h3>
              <p class="text-gray-500">Maecenas commodo libero ut molestie dictum. Morbi placerat eros id porttitor sagittis.</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-10">
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Ordered on</h4>
              <p class="text-gray-500">07/17/2021</p>
            </div>
            <div class="w-full lg:w-auto px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivered</h4>
              <p class="text-gray-500">07/23/2021</p>
            </div>
            <div class="w-full lg:w-auto ml-auto px-10"><a class="inline-block w-full md:w-auto mb-4 md:mb-0 mr-4 bg-gray-100 hover:bg-gray-200 text-center font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">View summary</a><a class="inline-block w-full md:w-auto bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Buy again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #8

Tailwind CSS

Yofte

<section class="relative py-20 md:pt-32 bg-blue-800 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <h2 class="mb-20 text-5xl text-white font-bold font-heading">What Customers Say</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
        <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
            <div class="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! 👏💥</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">Alice Kenowski, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <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>
                        </button>
                        <button 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">
                          <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>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
            <div class="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Embracing Serendipity: A Spontaneous Encounter with Interdum at Ante Porta</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">John Doe, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <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>
                        </button>
                        <button 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">
                          <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>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
            <div class="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Through the Lens of Taste: Capturing the Essence of Interdum at Ante Porta</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">Anthony Smith, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <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>
                        </button>
                        <button 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">
                          <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>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <div :class="{'hidden': showContent}" class="text-center"><a x-on:click.prevent="showContent = true" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Show More</a></div>
  </div>
</section>

Tailwind Component #9

Tailwind CSS

Yofte

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

Tailwind Component #10

Tailwind CSS

Yofte

<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-20 text-5xl font-bold font-heading">Billing address</h2>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-2/3 px-4">
          <form action="">
            <div class="flex flex-wrap -mx-4">
              <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                <div class="mb-10">
                  <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>
                  <label class="font-bold font-heading text-gray-600" for="">Username</label>
                  <div class="mt-4 flex items-center rounded-md">
                    <span class="self-stretch px-6 border border-r-0 rounded-l-md">
                      <svg class="h-full" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 0C3.58888 0 0 3.58888 0 8C0 12.4111 3.58888 16 8 16C9.51561 16 10.9912 15.5737 12.2671 14.7681L11.7329 13.9224C10.6172 14.6275 9.32617 15 8 15C4.14016 15 0.999996 11.8599 0.999996 8.00003C0.999996 4.14016 4.14013 0.999996 8 0.999996C11.8599 0.999996 15 4.14013 15 8V8.50001C15 9.32717 14.3271 10 13.5 10C12.6728 10 12 9.32717 12 8.50001V5.00001H11V5.3824C10.2662 4.54241 9.20032 4.00002 8 4.00002C5.79444 4.00002 4.00002 5.79444 4.00002 8C4.00002 10.2056 5.79444 12 8 12C9.49433 12 10.7844 11.1667 11.471 9.94946C11.925 10.5829 12.663 11 13.5 11C14.8784 11 16 9.87842 16 8.49998V7.99997C16 3.58888 12.4111 0 8 0V0ZM8 11C6.34569 11 5.00001 9.65428 5.00001 8C5.00001 6.34572 6.34572 5.00001 8 5.00001C9.65428 5.00001 11 6.34572 11 8C11 9.65428 9.65428 11 8 11Z" fill="black"></path>
                      </svg>
                    </span>
                    <input class="block w-full py-4 px-4 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-r-md" type="text">
                  </div>
                </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">
                <div class="flex flex-wrap -mx-4">
                  <div class="w-full lg:w-1/2 px-4 mb-10 md:mb-0">
                    <div class="lg:mb-10">
                      <label class="font-bold font-heading text-gray-600" for="">Address 1</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 class="hidden lg:block">
                      <label class="font-bold font-heading text-gray-600" for="">Country</label>
                      <select class="block w-full mt-4 py-4 px-8 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
                        <option value="1"></option>
                        <option value="2">United States</option>
                        <option value="3">Spain</option>
                        <option value="4">Poland</option>
                      </select>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/2 px-4">
                    <div class="mb-10">
                      <label class="font-bold font-heading text-gray-600" for="">Address 2</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 class="mb-10 lg:hidden">
                      <label class="font-bold font-heading text-gray-600" for="">Country</label>
                      <select class="block w-full mt-4 py-4 px-8 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
                        <option value="1"></option>
                        <option value="2">United States</option>
                        <option value="3">Spain</option>
                        <option value="4">Poland</option>
                      </select>
                    </div>
                    <div class="flex flex-wrap -mx-4">
                      <div class="w-full lg:w-3/5 px-4 mb-10 lg:mb-0">
                        <label class="font-bold font-heading text-gray-600" for="">State</label>
                        <select class="block w-full mt-4 py-4 px-8 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
                          <option value="1"></option>
                          <option value="2">United States</option>
                          <option value="3">Spain</option>
                          <option value="4">Poland</option>
                        </select>
                      </div>
                      <div class="w-full lg:w-2/5 px-4">
                        <label class="font-bold font-heading text-gray-600" for="">Zip Code</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>
                </div>
              </div>
              <div class="w-full mb-8 px-4">
                <label class="flex mb-6 items-center">
                  <input type="checkbox" name="accountType" value="personal">
                  <span class="ml-2 text-sm">Shipping address is the same as my billing address</span>
                </label>
                <label class="flex items-center">
                  <input type="checkbox" name="accountType" value="personal">
                  <span class="ml-2 text-sm">Save this information for next time</span>
                </label>
              </div>
              <div class="w-full mb-8 px-4">
                <h3 class="mb-4 font-bold font-heading text-gray-600">Payment</h3>
                <label class="flex mb-6 items-center">
                  <input type="radio" name="paymentType" value="" checked="">
                  <span class="ml-2 text-sm">Credit card</span>
                </label>
                <label class="flex mb-6 items-center">
                  <input type="radio" name="paymentType" value="">
                  <span class="ml-2 text-sm">Debit card</span>
                </label>
                <label class="flex items-center">
                  <input type="radio" name="paymentType" value="">
                  <span class="ml-2 text-sm">PayPal</span>
                </label>
              </div>
              <div class="w-full px-4">
                <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="">Name on card</label>
                      <input class="block w-full mt-4 mb-4 py-4 px-4 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text">
                      <p class="text-sm text-gray-500">Full name as displayed on card</p>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/2 px-4">
                    <div>
                      <label class="font-bold font-heading text-gray-600" for="">Credit card number</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>
                <div class="flex flex-wrap -mx-4">
                  <div class="w-full md:w-1/2 px-4">
                    <div class="mb-10">
                      <label class="font-bold font-heading text-gray-600" for="">Expiration</label>
                      <input class="block w-full mt-4 mb-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 md:w-1/2 px-4">
                    <div class="mb-10">
                      <label class="font-bold font-heading text-gray-600" for="">CVV</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>
              </div>
            </div>
          </form>
        </div>
        <div class="w-full xl:w-1/3 px-4">
          <div class="mb-12 p-6 lg:p-12 bg-blue-300">
            <div class="mb-6 pb-8 border-b border-blue-100">
              <h2 class="mb-6 text-3xl font-bold font-heading text-white">Order summary</h2>
              <p class="text-blue-50">Shipping and additional costs are calculated based on values you have entered.</p>
            </div>
            <div class="flex mb-2 justify-between items-center">
              <span class="text-blue-50">Order subtotal</span>
              <span class="text-xl font-bold font-heading text-white">$89.67</span>
            </div>
            <div class="flex mb-2 justify-between items-center">
              <span class="text-blue-50">Shipping</span>
              <span class="text-xl font-bold font-heading text-white">$11.00</span>
            </div>
            <div class="flex mb-5 justify-between items-center">
              <span class="text-blue-50">Tax</span>
              <span class="text-xl font-bold font-heading text-white">$0</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-xl font-bold font-heading text-white">Total</span>
              <span class="text-xl font-bold font-heading text-white">$100.67</span>
            </div>
          </div>
          <div>
            <span class="inline-block mb-4 font-medium">Apply discount code:</span>
            <div class="flex mb-12 flex-wrap lg:flex-nowrap items-center">
              <input class="inline-block mb-4 md:mb-0 mr-4 px-4 py-4 placeholder-gray-800 font-bold font-heading border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text" placeholder="SUMMER30X">
              <a class="inline-block mb-4 md:mb-0 px-7 py-4 text-white font-bold font-heading uppercase bg-gray-800 hover:bg-gray-700 rounded-md" href="#">Apply</a>
            </div>
            <a class="block w-full py-4 bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading uppercase rounded-md transition duration-200" href="#">Go to Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #11

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 text-4xl font-bold font-heading">FAQs</h2>
    <ul class="space-y-4">
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">Sed eget accumsan ipsum. Praesent dignissim?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">After curabitur eu laoreet libero eget en vel odio?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">A eget euismod dignissim, felis tortor mollis eros, non ultricies turpis eget leo?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">Curabitur elementum eu metus ut consequat?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">Sed eget accumsan ipsum. Praesent dignissim?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" :class="{ 'hidden': !showContent}" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">Sed eget accumsan ipsum. Praesent dignissim?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="mt-20 text-center"><a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-block bg-blue-300 hover:bg-blue-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">More</a></div>
  </div>
</section>

Tailwind Component #12

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="px-4 py-16 md:py-28 lg:px-20 bg-white">
      <h2 class="mb-8 text-5xl font-bold font-heading">Thanks for ordering</h2>
      <p class="mb-16 text-gray-500">Your payment went through</p>
      <div class="flex flex-wrap mb-8 pb-4 border-b">
        <div class="mr-20">
          <h3 class="text-gray-600">Order Number</h3>
          <p class="text-blue-300 font-bold font-heading">XYZ0864395</p>
        </div>
        <div class="mr-auto">
          <h3 class="text-gray-600">Date</h3>
          <p class="text-blue-300 font-bold font-heading">June 05, 2021</p>
        </div>
        <a class="inline-flex mt-6 lg:mt-0 w-full lg:w-auto justify-center items-center py-4 px-6 border hover:border-gray-500 rounded-md font-bold font-heading" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 1V0.25C0.585786 0.25 0.25 0.585786 0.25 1L1 1ZM15 19V19.75C15.4142 19.75 15.75 19.4142 15.75 19H15ZM1 19H0.25C0.25 19.4142 0.585786 19.75 1 19.75L1 19ZM10 1L10.5303 0.46967C10.3897 0.329018 10.1989 0.25 10 0.25V1ZM15 6H15.75C15.75 5.80109 15.671 5.61032 15.5303 5.46967L15 6ZM15 18.25H1V19.75H15V18.25ZM1.75 19V1H0.25V19H1.75ZM1 1.75H10V0.25H1V1.75ZM14.25 6V19H15.75V6H14.25ZM9.46967 1.53033L14.4697 6.53033L15.5303 5.46967L10.5303 0.46967L9.46967 1.53033ZM8.25 1V5H9.75V1H8.25ZM11 7.75H15V6.25H11V7.75ZM8.25 5C8.25 6.51878 9.48122 7.75 11 7.75V6.25C10.3096 6.25 9.75 5.69036 9.75 5H8.25Z" fill="black"></path>
          </svg>
          <span class="ml-4">View Invoice</span>
        </a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/waterbottle.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">BRILE water filter carafe</h3>
              <p class="text-gray-500">Maecenas 0.7 commodo sit</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-auto px-4 md:px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivery Address</h4>
              <p class="text-gray-500">Morgan S Hembree</p>
              <p class="text-gray-500">4767 Woodland Terrace</p>
              <p class="text-gray-500">California, CA 95821</p>
            </div>
            <div class="w-full lg:w-auto px-4 md:px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Shipping Informations</h4>
              <p class="text-gray-500">morgan@shuffleux.com</p>
              <p class="text-gray-500">916-971-2145</p>
            </div>
            <div class="w-full lg:w-auto px-4 md:px-10">
              <h4 class="mb-6 font-bold font-heading">Payment Informations</h4>
              <p class="text-gray-500">Mastercard</p>
              <p class="text-gray-500">Ending with 4242</p>
              <p class="text-gray-500">Expires 02 / 28</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/basketball.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">NIKE Basketball Ball</h3>
              <p class="text-gray-500">Lorem ipsum dolor size L</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-auto px-4 md:px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivery Address</h4>
              <p class="text-gray-500">Morgan S Hembree</p>
              <p class="text-gray-500">4767 Woodland Terrace</p>
              <p class="text-gray-500">California, CA 95821</p>
            </div>
            <div class="w-full lg:w-auto px-4 md:px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Shipping Informations</h4>
              <p class="text-gray-500">morgan@shuffleux.com</p>
              <p class="text-gray-500">916-971-2145</p>
            </div>
            <div class="w-full lg:w-auto px-4 md:px-10">
              <h4 class="mb-6 font-bold font-heading">Payment Informations</h4>
              <p class="text-gray-500">Mastercard</p>
              <p class="text-gray-500">Ending with 4242</p>
              <p class="text-gray-500">Expires 02 / 28</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
          <div class="flex items-center justify-center h-72 bg-gray-100">
            <img class="h-64 object-cover" src="yofte-assets/images/backpack.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-5/6 px-4">
          <div class="flex mb-16">
            <div class="mr-auto">
              <h3 class="text-xl font-bold font-heading">Backpack Travel</h3>
              <p class="text-gray-500">Maecenas commodo libero ut molestie dictum. Morbi placerat eros id porttitor sagittis.</p>
            </div>
            <span class="text-2xl font-bold font-heading text-blue-300">$29.89</span>
          </div>
          <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-auto px-4 md:px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Delivery Address</h4>
              <p class="text-gray-500">Morgan S Hembree</p>
              <p class="text-gray-500">4767 Woodland Terrace</p>
              <p class="text-gray-500">California, CA 95821</p>
            </div>
            <div class="w-full lg:w-auto px-4 md:px-10 mb-6 lg:mb-0">
              <h4 class="mb-6 font-bold font-heading">Shipping Informations</h4>
              <p class="text-gray-500">morgan@shuffleux.com</p>
              <p class="text-gray-500">916-971-2145</p>
            </div>
            <div class="w-full lg:w-auto px-4 md:px-10">
              <h4 class="mb-6 font-bold font-heading">Payment Informations</h4>
              <p class="text-gray-500">Mastercard</p>
              <p class="text-gray-500">Ending with 4242</p>
              <p class="text-gray-500">Expires 02 / 28</p>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-4">
        <div class="py-3 px-10 bg-gray-100 rounded-full">
          <div class="flex justify-between">
            <span class="font-bold font-heading">Subtotal</span>
            <span class="font-bold font-heading">$89.67</span>
          </div>
        </div>
        <div class="py-3 px-10 rounded-full">
          <div class="flex justify-between">
            <span class="font-bold font-heading">Shipping</span>
            <span class="font-bold font-heading">$11.00</span>
          </div>
        </div>
        <div class="py-3 px-10 bg-gray-100 rounded-full">
          <div class="flex justify-between">
            <span class="font-bold font-heading">Tax</span>
            <span class="font-bold font-heading">$0.00</span>
          </div>
        </div>
        <div class="py-3 px-10 rounded-full">
          <div class="flex justify-between">
            <span class="text-base md:text-xl font-bold font-heading">Order Total</span>
            <span class="font-bold font-heading">$100.67</span>
          </div>
        </div>
      </div>
      <div class="text-right"><a class="inline-block w-full md:w-auto text-center px-8 py-4 bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading uppercase rounded-md transition duration-200" href="#">Go back Shopping</a></div>
    </div>
  </div>
</section>

Tailwind Component #13

Tailwind CSS

Yofte

<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="p-6 bg-gray-50 h-full">
          <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>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$29.89</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-gray-50 h-full">
          <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>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">Bicycle S20</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 class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-gray-50 h-full">
          <span class="px-2 py-1"></span>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
            <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.89</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-gray-50 h-full">
          <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-blue-300 rounded-full text-blue-300 bg-white">NEW</span>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/skateboard.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">Kiteboard WH-004</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$199.90</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 md:mb-0 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-6 bg-gray-50 h-full">
          <span class="px-2 py-1"></span>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">WindRide Kiteboard Pro</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$20.89</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$25.69</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 class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 lg:mb-0 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-6 bg-gray-50 h-full">
          <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>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">BikeRide X2000</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$15.89</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$20.69</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 class="w-full md:w-1/2 lg:w-1/4 px-3 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-6 bg-gray-50 h-full">
          <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-blue-300 rounded-full text-blue-300 bg-white">NEW</span>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/skateboard.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">SurfBoard SB-007</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$159.90</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$199.69</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 class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 lg:mb-0 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-6 bg-gray-50 h-full">
          <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>
          <a class="block px-6 mt-6 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">AirMax Basketball Pro</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$5.30</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$10.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>
    <div class="text-center">
      <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase" href="#">Show More</a>
    </div>
  </div>
</section>

Tailwind Component #14

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 pb-20 border-b">
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-16 lg:mb-0">
        <img class="hidden md:block absolute top-0 left-1/2 ml-16 lg:ml-8" src="yofte-assets/elements/dots.svg" alt="">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="37" height="27" viewBox="0 0 37 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M34.9845 6.67016C33.7519 5.33682 32 4.60814 30.0543 4.60814H24.9767V1.75543C24.9767 1.2438 24.5581 0.825195 24.0465 0.825195H0.930233C0.418605 0.825195 0 1.2438 0 1.75543V22.2128C0 22.7244 0.418605 23.143 0.930233 23.143H4.63566C4.93798 24.864 6.43411 26.174 8.24031 26.174C10.0465 26.174 11.5426 24.864 11.845 23.143H24.0465H26.0853C26.3876 24.864 27.8837 26.174 29.6899 26.174C31.4961 26.174 32.9922 24.864 33.2946 23.143H36.0698C36.5814 23.143 37 22.7244 37 22.2128V12.6004C36.9922 10.143 36.3023 8.08876 34.9845 6.67016ZM1.86047 2.68566H23.1163V5.53837V21.2903H11.6822C11.1783 19.8795 9.82171 18.864 8.24031 18.864C6.65892 18.864 5.30233 19.8795 4.79845 21.2903H1.86047V2.68566ZM8.24031 24.3136C7.24806 24.3136 6.44186 23.5074 6.44186 22.5151C6.44186 21.5229 7.24806 20.7167 8.24031 20.7167C9.23256 20.7167 10.0388 21.5229 10.0388 22.5151C10.0388 23.5074 9.23256 24.3136 8.24031 24.3136ZM29.6899 24.3136C28.6977 24.3136 27.8915 23.5074 27.8915 22.5151C27.8915 21.5229 28.6977 20.7167 29.6899 20.7167C30.6822 20.7167 31.4884 21.5229 31.4884 22.5151C31.4884 23.5074 30.6822 24.3136 29.6899 24.3136ZM35.1318 21.2826H33.1318C32.6279 19.8717 31.2713 18.8562 29.6899 18.8562C28.1085 18.8562 26.7519 19.8717 26.2481 21.2826H24.9845V6.46861H30.062C33.1938 6.46861 35.1395 8.81744 35.1395 12.6004V21.2826H35.1318Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Free Shipping</h3>
          <p>From $45</p>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-16 lg:mb-0">
        <img class="hidden lg:block absolute top-0 left-1/2 ml-8" src="yofte-assets/elements/dots.svg" alt="">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M33.7601 6.67776C30.3819 3.38616 25.8883 1.57227 21.1139 1.57227C16.2512 1.57227 11.7014 3.44089 8.30713 6.83414C7.93802 7.20161 7.94604 7.79581 8.32318 8.16329C8.70032 8.52294 9.31017 8.51512 9.68731 8.14765C12.7205 5.12188 16.7727 3.45653 21.1139 3.45653C29.9165 3.44871 37.0742 10.4228 37.0742 18.9998C37.0742 27.5767 29.9165 34.5508 21.1139 34.5508C12.3113 34.5508 5.15359 27.5767 5.15359 18.9998V18.8043L6.7424 20.3524C6.92696 20.5322 7.17571 20.626 7.42446 20.626C7.67322 20.626 7.91395 20.5322 8.10653 20.3524C8.48367 19.9849 8.48367 19.3907 8.10653 19.0232L4.88077 15.8724C4.50363 15.5049 3.89378 15.5049 3.51664 15.8724L0.282856 19.0232C-0.0942853 19.3907 -0.0942853 19.9849 0.282856 20.3524C0.467414 20.5322 0.716167 20.626 0.96492 20.626C1.21367 20.626 1.4544 20.5322 1.64698 20.3524L3.23579 18.8043V18.9998C3.23579 23.6518 5.09742 28.0302 8.47565 31.3218C11.8539 34.6134 16.3475 36.4273 21.1219 36.4273C25.8964 36.4273 30.39 34.6134 33.7682 31.3218C37.1464 28.0302 39 23.6518 39 18.9998C39 14.3477 37.1384 9.96937 33.7601 6.67776Z" fill="black"></path>
                <path d="M21.1143 8.86719C17.9848 8.86719 15.4411 11.3457 15.4411 14.3949V17.061H13.6758C13.1462 17.061 12.7129 17.4832 12.7129 17.9992V27.358C12.7129 27.874 13.1462 28.2962 13.6758 28.2962H28.5608C29.0904 28.2962 29.5238 27.874 29.5238 27.358V18.007C29.5238 17.491 29.0904 17.0688 28.5608 17.0688H26.7955V14.4027C26.7955 11.3535 24.2438 8.86719 21.1143 8.86719ZM17.367 14.4027C17.367 12.3855 19.0521 10.7515 21.1143 10.7515C23.1766 10.7515 24.8617 12.3933 24.8617 14.4027V17.0688H17.367V14.4027ZM27.5979 26.4198H14.6387V18.9375H27.5979V26.4198Z" fill="black"></path>
              </g>
              <defs><clipPath id="clip0"><rect width="39" height="38" fill="white"></rect></clipPath></defs>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Secure Shopping</h3>
          <p>100% Guarantee</p>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-16 md:mb-0">
        <img class="hidden md:block absolute top-0 left-1/2 ml-16 lg:ml-8" src="yofte-assets/elements/dots.svg" alt="">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="31" height="37" viewBox="0 0 31 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.59532 15.0855C9.59532 14.5814 9.18285 14.1689 8.67872 14.1689H1.33066C0.826531 14.1689 0.414062 14.5814 0.414062 15.0855C0.414062 15.5897 0.826531 16.0021 1.33066 16.0021H8.67872C9.18285 16.0021 9.59532 15.5897 9.59532 15.0855Z" fill="black"></path>
              <path d="M29.669 14.1689H22.3209C21.8168 14.1689 21.4043 14.5814 21.4043 15.0855C21.4043 15.5897 21.8168 16.0021 22.3209 16.0021H29.669C30.1731 16.0021 30.5856 15.5897 30.5856 15.0855C30.5856 14.5814 30.1807 14.1689 29.669 14.1689Z" fill="black"></path>
              <path d="M15.4996 9.18126C16.0037 9.18126 16.4162 8.76879 16.4162 8.26466V0.916598C16.4162 0.412469 16.0037 0 15.4996 0C14.9955 0 14.583 0.412469 14.583 0.916598V8.26466C14.583 8.76879 14.9955 9.18126 15.4996 9.18126Z" fill="black"></path>
              <path d="M20.3199 11.1823C20.5567 11.1823 20.7858 11.0906 20.9691 10.915L26.1708 5.71327C26.5298 5.35427 26.5298 4.77376 26.1708 4.41476C25.8118 4.05576 25.2313 4.05576 24.8723 4.41476L19.6706 9.61645C19.3116 9.97545 19.3116 10.556 19.6706 10.915C19.8539 11.0906 20.0907 11.1823 20.3199 11.1823Z" fill="black"></path>
              <path d="M10.0305 10.915C10.2062 11.0906 10.443 11.1823 10.6798 11.1823C10.9166 11.1823 11.1457 11.0906 11.329 10.915C11.688 10.556 11.688 9.97545 11.329 9.61645L6.12733 4.41476C5.76833 4.05576 5.18782 4.05576 4.82882 4.41476C4.46982 4.77376 4.46982 5.35427 4.82882 5.71327L10.0305 10.915Z" fill="black"></path>
              <path d="M26.8398 21.178C26.1447 20.5822 25.2663 20.2537 24.3726 20.2537H23.5401H20.5458H19.1251V16.5491C19.1251 14.777 18.5981 13.4862 17.5516 12.7147C15.9017 11.5078 13.6637 12.1877 13.5644 12.2182C13.1825 12.3404 12.9228 12.6918 12.9228 13.089V17.5574C12.9228 18.917 12.2735 20.0704 10.9827 20.9946C10.005 21.6974 9.00434 22.0182 8.87448 22.0564L8.78282 22.0793C8.4391 21.6897 7.93497 21.4453 7.36974 21.4453H3.88666C2.84785 21.4453 2 22.2932 2 23.332V34.7589C2 35.7977 2.84785 36.6456 3.88666 36.6456H7.38501C7.84331 36.6456 8.27106 36.4775 8.59187 36.2025C9.29459 36.89 10.2494 37.3101 11.2806 37.3101H14.756H15.115H22.2263C23.3262 37.3101 24.2962 37.0427 25.0372 36.5463C25.9843 35.9046 26.5725 34.8887 26.7405 33.5902L28.1536 24.8062C28.3751 23.4465 27.871 22.0564 26.8398 21.178ZM7.43848 34.7589C7.43848 34.7894 7.41557 34.8124 7.38501 34.8124H3.88666C3.85611 34.8124 3.8332 34.7894 3.8332 34.7589V23.332C3.8332 23.3014 3.85611 23.2785 3.88666 23.2785H7.38501C7.41557 23.2785 7.43848 23.3014 7.43848 23.332V34.7589ZM26.3433 24.5235L24.9302 33.3229C24.9302 33.3305 24.9302 33.3458 24.9226 33.3611C24.8615 33.8881 24.6629 35.4845 22.2263 35.4845H15.115H14.756H11.2806C10.3028 35.4845 9.44736 34.7512 9.29459 33.7812C9.28695 33.743 9.27931 33.7048 9.27168 33.6742V23.8514L9.32515 23.8361C9.34042 23.8361 9.34806 23.8285 9.36334 23.8285C9.41681 23.8132 10.7153 23.4465 12.0062 22.5223C13.8012 21.2467 14.756 19.5281 14.756 17.5574V13.8452C15.2601 13.7917 15.9552 13.8146 16.467 14.1889C17.0169 14.5937 17.2919 15.3881 17.2919 16.5415V21.1627C17.2919 21.6668 17.7044 22.0793 18.2085 22.0793H20.5458H23.5401H24.3726C24.8309 22.0793 25.2816 22.255 25.6482 22.5605C26.1982 23.0341 26.4579 23.7826 26.3433 24.5235Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Customer Satisfaction</h3>
          <p>100% Positive Feedbacks</p>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="35" height="37" viewBox="0 0 35 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M30.0586 14.0693V12.6468C30.0586 9.24223 28.8538 6.07857 26.6695 3.73109C24.4309 1.32143 21.3527 0 17.9947 0H16.821C13.463 0 10.3849 1.32143 8.14622 3.73109C5.96197 6.07857 4.75714 9.24223 4.75714 12.6468V14.0693C2.10651 14.2481 0 16.4557 0 19.1529V21.3761C0 24.1821 2.28529 26.4674 5.09139 26.4674H7.95966C8.47269 26.4674 8.89244 26.0477 8.89244 25.5347V14.9866C8.89244 14.4735 8.47269 14.0538 7.95966 14.0538H6.62269V12.6468C6.62269 6.49832 11.0067 1.86555 16.8132 1.86555H17.987C23.8013 1.86555 28.1775 6.49832 28.1775 12.6468V14.0538H26.8405C26.3275 14.0538 25.9078 14.4735 25.9078 14.9866V25.5269C25.9078 26.0399 26.3275 26.4597 26.8405 26.4597H28.1464C27.7655 31.3256 24.4153 32.4527 22.8607 32.7092C22.4332 31.3956 21.1973 30.4473 19.7437 30.4473H17.4118C15.6084 30.4473 14.1393 31.9164 14.1393 33.7197C14.1393 35.5231 15.6084 37 17.4118 37H19.7515C21.2595 37 22.5265 35.9739 22.9074 34.5903C23.6691 34.4815 24.8739 34.2095 26.071 33.5099C27.7578 32.5227 29.7555 30.5095 30.0197 26.4519C32.6859 26.2887 34.8002 24.0733 34.8002 21.3683V19.1452C34.808 16.4557 32.7092 14.2403 30.0586 14.0693ZM7.04244 24.5941H5.10693C3.32689 24.5941 1.88109 23.1483 1.88109 21.3683V19.1452C1.88109 17.3651 3.32689 15.9193 5.10693 15.9193H7.04244V24.5941ZM19.7515 35.1345H17.4118C16.6345 35.1345 16.0048 34.5048 16.0048 33.7275C16.0048 32.9502 16.6345 32.3206 17.4118 32.3206H19.7515C20.5288 32.3206 21.1584 32.9502 21.1584 33.7275C21.1584 34.5048 20.5288 35.1345 19.7515 35.1345ZM32.9424 21.3683C32.9424 23.1483 31.4966 24.5941 29.7166 24.5941H27.7811V15.9193H29.7166C31.4966 15.9193 32.9424 17.3651 32.9424 19.1452V21.3683Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Support</h3>
          <p>Online Support 24/7</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #15

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 36, 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>
    </div>
    <div class="flex flex-wrap -mx-3 mb-24">
      <div class="w-full lg:hidden px-3">
        <div class="flex flex-wrap -mx-2">
          <div class="w-1/2 md:w-1/3 px-2 mb-4" x-data="{ showCategory: false }">
            <div x-on:click.prevent="showCategory = !showCategory" class="py-6 px-2 text-center bg-gray-50">
              <a class="font-bold font-heading" href="#">Category</a>
              <ul :class="{'hidden': !showCategory}" class="hidden text-left mt-6">
                <li class="mb-4"><a href="#">New in</a></li>
                <li class="mb-4"><a href="#">Activewear</a></li>
                <li class="mb-4"><a href="#">Hoodies &amp; Sweatshirts</a></li>
                <li class="mb-4"><a href="#">Jackets</a></li>
                <li class="mb-4"><a href="#">Multipacks</a></li>
                <li class="mb-4"><a href="#">Bags</a></li>
                <li class="mb-4"><a href="#">Sports</a></li>
                <li class="mb-4"><a href="#">Gifts</a></li>
                <li><a href="#">Notes</a></li>
              </ul>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 px-2 mb-4" x-data="{ showCategory: false }">
            <div x-on:click.prevent="showCategory = !showCategory" class="py-6 px-2 text-center bg-gray-50">
              <a class="font-bold font-heading" href="#">Colors</a>
              <div :class="{'hidden': !showCategory}" class="hidden mt-6 flex flex-wrap">
                <button x-on:click="color = 1" class="mr-4 mb-2 rounded-full border border-blue-300 p-1" :class="{ 'border-blue-300': color==1, 'border-transparent hover:border-gray-300': color!=1 }">
                  <div class="rounded-full bg-blue-300 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 2" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==2, 'border-transparent hover:border-gray-300': color!=2 }">
                  <div class="rounded-full bg-orange-300 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 3" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==3, 'border-transparent hover:border-gray-300': color!=3 }">
                  <div class="rounded-full bg-gray-900 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 4" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==4, 'border-transparent hover:border-gray-300': color!=4 }">
                  <div class="rounded-full bg-red-300 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 5" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==5, 'border-transparent hover:border-gray-300': color!=5 }">
                  <div class="rounded-full bg-green-300 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 6" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==6, 'border-transparent hover:border-gray-300': color!=6 }">
                  <div class="rounded-full bg-pink-300 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 7" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==7, 'border-transparent hover:border-gray-300': color!=7 }">
                  <div class="rounded-full bg-yellow-300 w-5 h-5"></div>
                </button>
                <button x-on:click="color = 8" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==8, 'border-transparent hover:border-gray-300': color!=8 }">
                  <div class="rounded-full bg-gray-100 w-5 h-5"></div>
                </button>
              </div>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 px-2 mb-4" x-data="{ showCategory: false }">
            <div x-on:click.prevent="showCategory = !showCategory" class="py-6 px-4 text-center bg-gray-50">
              <a class="font-bold font-heading" href="#">Price</a>
              <div :class="{'hidden': !showCategory}" class="hidden mt-6">
                <input x-model="price" class="w-full mb-4 outline-none appearance-none bg-gray-100 h-1 rounded cursor-pointer" type="range" min="1" max="289">
                <div class="flex justify-between">
                  <span x-text="price + '$'" class="inline-block text-lg font-bold font-heading text-blue-300">50$</span>
                  <span class="inline-block text-lg font-bold font-heading text-blue-300">$289</span>
                </div>
              </div>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 px-2 mb-4" x-data="{ showCategory: false }">
            <div x-on:click.prevent="showCategory = !showCategory" class="py-6 px-4 text-center bg-gray-50">
              <a class="font-bold font-heading" href="#">Size</a>
              <div :class="{'hidden': !showCategory}" class="hidden mt-6 flex flex-wrap -mx-2 -mb-2">
                <button x-ref="size10" x-on:click="size = $refs.size10.textContent" class="relative mb-2 mr-1 w-16 border rounded-md" :class="{ 'hover:border-gray-400': size != $refs.size10.textContent }">
                    36
                    <span class="absolute bottom-0 left-0 w-full py-px bg-blue-300" :class="{ 'bg-blue-300': size == $refs.size10.textContent }"></span>
                </button>
                <button x-ref="size11" x-on:click="size = $refs.size11.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size11.textContent }">
                    37
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size11.textContent }"></span>
                </button>
                <button x-ref="size12" x-on:click="size = $refs.size12.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size12.textContent }">
                    38
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size12.textContent }"></span>
                </button>
                <button x-ref="size13" x-on:click="size = $refs.size13.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size13.textContent }">
                    39
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size13.textContent }"></span>
                </button>
                <button x-ref="size14" x-on:click="size = $refs.size14.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size14.textContent }">
                    40
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size14.textContent }"></span>
                </button>
                <button x-ref="size15" x-on:click="size = $refs.size15.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size15.textContent }">
                    41
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size15.textContent }"></span>
                </button>
                <button x-ref="size16" x-on:click="size = $refs.size16.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size16.textContent }">
                    42
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size16.textContent }"></span>
                </button>
                <button x-ref="size17" x-on:click="size = $refs.size17.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size17.textContent }">
                    43
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size17.textContent }"></span>
                </button>
                <button x-ref="size18" x-on:click="size = $refs.size18.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size18.textContent }">
                    44
                    <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size18.textContent }"></span>
                </button>
              </div>
              <div class="hidden mt-4 text-right">
                <a class="inline-flex underline text-blue-300 hover:text-blue-400" href="#">
                  <span class="mr-2">Show all</span>
                  <svg width="14" height="27" viewBox="0 0 14 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.83901 26.2775L0.151884 19.5904L0.987775 18.7545L6.66766 24.4343L6.66347 0.782814L7.84208 0.782814L7.84626 24.4343L13.1082 19.1724L13.9441 20.0083L7.6749 26.2775C7.44407 26.5083 7.06985 26.5083 6.83901 26.2775Z" fill="#3C60D9"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 px-2 mb-4" x-data="{ showCategory: false }">
            <div x-on:click.prevent="showCategory = !showCategory" class="py-6 px-4 text-center bg-gray-50">
              <a class="font-bold font-heading" href="#">Location</a>
              <div :class="{'hidden': !showCategory}" class="hidden mt-6">
                <label class="flex mb-3 items-center text-lg">
                  <input type="checkbox">
                  <span class="ml-2">Standard</span>
                </label>
                <label class="flex items-center text-lg">
                  <input type="checkbox">
                  <span class="ml-2">Next day (yes!)</span>
                </label>
              </div>
            </div>
          </div>
          <div class="w-1/2 md:w-1/3 px-2 mb-4" x-data="{ showCategory: false }">
            <div x-on:click.prevent="showCategory = !showCategory" class="py-6 px-4 text-center bg-gray-50">
              <a class="font-bold font-heading" href="#">Location</a>
              <input :class="{'hidden': !showCategory}" class="hidden mt-6 w-full px-8 py-4 bg-white border rounded-md" type="serach" placeholder="City">
            </div>
          </div>
        </div>
      </div>
      <div class="hidden lg:block w-1/4 px-3">
        <div class="mb-6 py-10 px-12 bg-gray-50">
          <h3 class="mb-8 text-2xl font-bold font-heading">Category</h3>
          <ul>
            <li class="mb-4"><a class="text-lg" href="#">New in</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Activewear</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Hoodies &amp; Sweatshirts</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Jackets</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Multipacks</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Bags</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Sports</a></li>
            <li class="mb-4"><a class="text-lg" href="#">Gifts</a></li>
            <li><a class="text-lg" href="#">Notes</a></li>
          </ul>
        </div>
        <div class="mb-6 py-10 px-12 bg-gray-50">
          <h3 class="mb-8 text-2xl font-bold font-heading">Colors</h3>
          <div class="flex flex-wrap">
            <button x-on:click="color = 1" class="mr-4 mb-2 rounded-full border border-blue-300 p-1" :class="{ 'border-blue-300': color==1, 'border-transparent hover:border-gray-300': color!=1 }">
              <div class="rounded-full bg-blue-300 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 2" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==2, 'border-transparent hover:border-gray-300': color!=2 }">
              <div class="rounded-full bg-orange-300 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 3" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==3, 'border-transparent hover:border-gray-300': color!=3 }">
              <div class="rounded-full bg-gray-900 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 4" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==4, 'border-transparent hover:border-gray-300': color!=4 }">
              <div class="rounded-full bg-red-300 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 5" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==5, 'border-transparent hover:border-gray-300': color!=5 }">
              <div class="rounded-full bg-green-300 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 6" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==6, 'border-transparent hover:border-gray-300': color!=6 }">
              <div class="rounded-full bg-pink-300 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 7" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==7, 'border-transparent hover:border-gray-300': color!=7 }">
              <div class="rounded-full bg-yellow-300 w-5 h-5"></div>
            </button>
            <button x-on:click="color = 8" class="mr-4 mb-2 rounded-full border border-transparent hover:border-gray-300 p-1" :class="{ 'border-blue-300': color==8, 'border-transparent hover:border-gray-300': color!=8 }">
              <div class="rounded-full bg-gray-100 w-5 h-5"></div>
            </button>
          </div>
        </div>
        <div class="mb-6 py-10 px-12 bg-gray-50">
          <h3 class="mb-8 text-2xl font-bold font-heading">Price</h3>
          <div>
            <input x-model="price" class="w-full mb-4 outline-none appearance-none bg-gray-100 h-1 rounded cursor-pointer" type="range" min="1" max="289">
            <div class="flex justify-between">
              <span x-text="price + '$'" class="inline-block text-lg font-bold font-heading text-blue-300">50$</span>
              <span class="inline-block text-lg font-bold font-heading text-blue-300">$289</span>
            </div>
          </div>
        </div>
        <div class="mb-6 py-12 pl-12 pr-6 bg-gray-50">
          <h3 class="mb-8 text-2xl font-bold font-heading">Size</h3>
          <div class="flex flex-wrap -mx-2 -mb-2">
            <button x-ref="size1" x-on:click="size = $refs.size1.textContent" class="relative mb-2 mr-1 w-16 border rounded-md" :class="{ 'hover:border-gray-400': size != $refs.size1.textContent }">
                36
                <span class="absolute bottom-0 left-0 w-full py-px bg-blue-300" :class="{ 'bg-blue-300': size == $refs.size1.textContent }"></span>
            </button>
            <button x-ref="size2" x-on:click="size = $refs.size2.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size2.textContent }">
                37
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size2.textContent }"></span>
            </button>
            <button x-ref="size3" x-on:click="size = $refs.size3.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size3.textContent }">
                38
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size3.textContent }"></span>
            </button>
            <button x-ref="size4" x-on:click="size = $refs.size4.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size4.textContent }">
                39
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size4.textContent }"></span>
            </button>
            <button x-ref="size5" x-on:click="size = $refs.size5.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size5.textContent }">
                40
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size5.textContent }"></span>
            </button>
            <button x-ref="size6" x-on:click="size = $refs.size6.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size6.textContent }">
                41
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size6.textContent }"></span>
            </button>
            <button x-ref="size7" x-on:click="size = $refs.size7.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size7.textContent }">
                42
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size7.textContent }"></span>
            </button>
            <button x-ref="size8" x-on:click="size = $refs.size8.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size8.textContent }">
                43
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size8.textContent }"></span>
            </button>
            <button x-ref="size9" x-on:click="size = $refs.size9.textContent" class="relative mb-2 mr-1 w-16 border rounded-md hover:border-gray-400" :class="{ 'hover:border-gray-400': size != $refs.size9.textContent }">
                44
                <span class="absolute bottom-0 left-0 w-full py-px" :class="{ 'bg-blue-300': size == $refs.size9.textContent }"></span>
            </button>
          </div>
          <div class="mt-4 text-right">
            <a class="inline-flex underline text-blue-300 hover:text-blue-400" href="#">
              <span class="mr-2">Show all</span>
              <svg width="14" height="27" viewBox="0 0 14 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.83901 26.2775L0.151884 19.5904L0.987775 18.7545L6.66766 24.4343L6.66347 0.782814L7.84208 0.782814L7.84626 24.4343L13.1082 19.1724L13.9441 20.0083L7.6749 26.2775C7.44407 26.5083 7.06985 26.5083 6.83901 26.2775Z" fill="#3C60D9"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="mb-6 py-10 px-12 bg-gray-50">
          <h3 class="mb-6 text-2xl font-bold font-heading">Location</h3>
          <label class="flex mb-3 items-center text-lg">
            <input type="checkbox">
            <span class="ml-2">Standard</span>
          </label>
          <label class="flex items-center text-lg">
            <input type="checkbox">
            <span class="ml-2">Next day (yes!)</span>
          </label>
        </div>
        <div class="mb-6 py-10 px-12 bg-gray-50">
          <h3 class="mb-6 text-2xl font-bold font-heading">Location</h3>
          <input class="w-full px-8 py-4 bg-white border rounded-md" type="serach" placeholder="City">
        </div>
      </div>
      <div class="w-full lg:w-3/4 px-3">
        <div class="flex flex-wrap -mx-3">
          <div class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$29.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Bicycle S20</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1"></span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                <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.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-blue-300 rounded-full text-blue-300 bg-white">NEW</span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/skateboard.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Kiteboard WH-004</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$19.90</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/backpack.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Backpack Travel</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$21.99</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$24.00</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Bicycle S20</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$29.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Bicycle S20</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1"></span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                <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.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-blue-300 rounded-full text-blue-300 bg-white">NEW</span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/skateboard.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Kiteboard WH-004</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$19.90</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/backpack.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Backpack Travel</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$21.99</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$24.00</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Bicycle S20</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$29.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <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>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/cycle.png" alt="">
                <h3 class="mb-2 text-xl font-bold font-heading">Bicycle S20</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8" :class="{'lg:w-1/4': grid == 4}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1"></span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                <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.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8 hidden" :class="{'lg:w-1/4': grid == 4, 'hidden': !showContent}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1"></span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                <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.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8 hidden" :class="{'lg:w-1/4': grid == 4, 'hidden': !showContent}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1"></span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                <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.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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 class="w-full sm:w-1/2 md:w-1/3 px-3 mb-8 hidden" :class="{'lg:w-1/4': grid == 4, 'hidden': !showContent}">
            <div class="p-6 bg-gray-50 h-full">
              <span class="px-2 py-1"></span>
              <a class="block px-6 mt-6 mb-2" href="#">
                <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                <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.89</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</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>
      </div>
    </div>
    <div :class="{'hidden': showContent}" class="text-center">
      <a x-on:click.prevent="showContent = true" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase" href="#">Show More</a>
    </div>
  </div>
</section>

Tailwind Component #16

Tailwind CSS

Yofte

<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>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" 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>
          </svg>
        </a>
        <a class="flex items-center hover:text-gray-600" href="#">
          <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
        </a>
      </div>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-600" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="#8594A5"></path>
      </svg>
    </button>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <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>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Tailwind Component #17

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <div class="absolute inset-0 bg-blue-200 my-12 -ml-12 -mr-12"></div>
      <div class="relative pt-20 pb-32 px-8 bg-blue-300 text-center">
        <a class="inline-block mb-14" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt="">
        </a>
        <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.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>
  </div>
</section>

Tailwind Component #18

Tailwind CSS

Yofte

<section class="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-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Latest Blog</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="mb-20 flex transition-transform duration-500 ease-in-out -m-3">
      <div x-ref="slide1" class="flex-shrink-0 w-full max-w-3xl p-3">
        <div class="relative">
          <a class="absolute z-10 top-0 mt-80 right-0 m-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="relative block group" href="#">
            <div class="relative h-96">
              <img class="w-full h-96 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-3xl md:text-4xl 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 x-ref="slide2" class="flex-shrink-0 w-full max-w-3xl p-3">
        <div class="relative">
          <a class="absolute z-10 top-0 mt-80 right-0 m-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="relative block group" href="#">
            <div class="relative h-96">
              <img class="w-full h-96 object-cover object-top" src="yofte-assets/images/placeholder-girl.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-3xl md:text-4xl font-bold font-heading">Next year: one ultricies condimentum phare</h3>
                <span class="text-lg font-bold font-heading text-blue-300 uppercase">14 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div x-ref="slide3" class="flex-shrink-0 w-full max-w-3xl p-3">
        <div class="relative">
          <a class="absolute z-10 top-0 mt-80 right-0 m-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="relative block group" href="#">
            <div class="relative h-96">
              <img class="w-full h-96 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-3xl md:text-4xl font-bold font-heading">Within aliquam erat volutpat ut pharetra sit amet aliquam id.</h3>
                <span class="text-lg font-bold font-heading text-blue-300 uppercase">15 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="mb-20 flex-shrink-0 w-full">
      <div class="w-full px-3 flex items-center justify-between">
        <div class="relative mr-4 bg-gray-300 py-px w-full md:w-10/12">
          <div class="absolute top-0 bottom-0 left-0 bg-yellow-600" :class="{ 'w-1/3': activeSlide == 0, 'w-2/3': activeSlide == 1, 'w-full': activeSlide == 2 }"></div>
        </div>
        <div class="ml-auto md:w-2/12 flex items-center justify-end">
          <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 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>
    <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Show More</a></div>
  
</section>

Tailwind Component #19

Tailwind CSS

Yofte

<section class="relative py-20">
  <div class="absolute top-0 left-0 bottom-0 w-1/12 bg-gray-100"></div>
  <div class="container mx-auto px-4">
    <div class="w-11/12 ml-auto flex flex-wrap -mx-4 -mb-8 justify-between">
      <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>

Tailwind Component #20

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto relative">
    <div class="absolute inset-0 bg-blue-200 my-8 -ml-4 -mr-4"></div>
    <div class="relative bg-blue-300 overflow-hidden">
      <img class="absolute top-0 left-0 xl:-ml-40 w-full h-full" src="yofte-assets/elements/cta-lines.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 text-white">New Products</span>
          <h2 class="mt-4 mb-14 text-4xl md:text-5xl font-bold font-heading text-white">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="https://images.unsplash.com/photo-1554244933-d876deb6b2ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

Yofte UI Components by Shuffle

Choose from 344 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Shuffle Components in Yofte library

Framework

UI Library

Components

Tailwind Component #1

Tailwind Component #2

Tailwind Component #3

Tailwind Component #4

Tailwind Component #5

Tailwind Component #6

Tailwind Component #7

Tailwind Component #8

Tailwind Component #9

Tailwind Component #10

Tailwind Component #11

Tailwind Component #12

Tailwind Component #13

Tailwind Component #14

Tailwind Component #15

Tailwind Component #16

Tailwind Component #17

Tailwind Component #18

Tailwind Component #19

Tailwind Component #20

Yofte UI Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company