Tailwind CSS Components

<section class="pt-16 pb-24 bg-gray-900">
  <div class="container px-4 mx-auto relative">
    <div class="relative z-10 flex flex-col sm:flex-row mb-6 items-end sm:items-center justify-end">
      <span class="sm:mr-4 text-sm text-gray-700 font-light">I already have an account</span>
      <a class="inline-flex items-center font-medium text-green-900 hover:text-green-800" href="#">
        <span class="mr-2">Sign in</span>
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
    <a class="relative z-10 flex mb-16 items-center text-white hover:text-gray-200" href="#">
      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.10529 11L7.18516 10.0272L2.92291 6.1875L14 6.1875L14 4.8125L2.92291 4.8125L7.18516 0.972813L6.10529 -6.90178e-07L4.80825e-07 5.5L6.10529 11Z" fill="currentColor"></path>
      </svg>
      <span class="ml-6">Back home</span>
    </a>
    <div class="relative mb-24 xl:mb-64">
      <img class="hidden xl:block absolute top-0 left-0 -mt-40 w-full mx-auto" src="wrexa-assets/images/circle-avatars-center-element.png" alt="">
      <div class="max-w-lg mx-auto xl:pt-64 text-center">
        <h2 class="font-heading text-4xl sm:text-5xl xl:text-6xl text-white">Better together. Register now</h2>
        <img class="xl:hidden block mx-auto" src="wrexa-assets/images/circle-avatars-center-element.png" alt="">
      </div>
    </div>

<section class="pt-18 bg-white">
  <div class="pt-24 md:pt-64 pb-40" style="background-image: url('/wrexa-assets/images/background-men-photo.png'); background-repeat: no-repeat; background-size: cover;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-lg">
            <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl xl:text-8xl text-white mb-20">
              <span class="block leading-none">Turnover.</span>
              <span class="block leading-none">Even more than you expect</span>
            </h1>
            <div>
              <a class="inline-flex mb-20 items-center text-white" href="#">
                <span class="mr-4">Exploring the shift of today</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-none">
          <div class="flex flex-wrap -mx-2">
            <div class="w-1/2 px-2">
              <img class="block mx-auto mt-20" src="wrexa-assets/images/mom-son-photo.png" alt="">

<section class="relative py-24 md:pt-32 bg-gray-900">
  <div class="container px-4 mx-auto relative">
    <img class="hidden md:block absolute bottom-0 left-0 mb-52 lg:mb-12 w-full" src="wrexa-assets/elements/half-circles-with-logo.svg" alt="">
    <div class="relative">
      <div class="flex items-center mb-24 sm:mb-40">
        <span class="font-heading text-xl text-white">01</span>
        <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
        <span class="font-heading text-xl text-white">Introduction</span>
      </div>
      <div class="text-center mb-32">
        <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl text-white">How it works?</h1>
      </div>
      <div class="flex flex-wrap -mx-4 mb-24 md:mb-52">
        <div class="w-full md:w-1/2 2xl:w-1/4 px-4 mb-16 2xl:mb-0">
          <div class="max-w-xs mx-auto pt-8 pb-14 px-12 bg-gray-800 rounded-xl">
            <span class="text-sm text-gray-500">Step 1</span>
            <h4 class="text-3xl text-white mt-1 mb-8">Download our Application</h4>
            <div>
              <span class="font-light text-gray-500">Get started.</span>
              <a class="inline-block font-light text-gray-500 hover:text-gray-400" href="#">Click here</a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 2xl:w-1/4 px-4 2xl:mt-52 mb-16 2xl:mb-0">

<section>
  <div class="pt-10 pb-16 bg-white">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-start xl:items-center justify-center">
        <div class="w-1/2 xl:w-auto flex flex-wrap items-center justify-center xl:-mb-6">
          <a class="inline-block w-full lg:w-auto text-sm mb-6 mr-14" href="#">Collection</a><a class="inline-block w-full lg:w-auto text-sm mb-6 mr-14" href="#">Projects</a><a class="inline-block w-full lg:w-auto text-sm mb-6 mr-14" href="#">About</a>
          <div class="w-full lg:w-auto md:mr-64 mb-6">
            <a class="inline-block text-sm w-full sm:w-auto relative" href="#">
              <span>Careers</span>
              <div class="absolute top-0 left-0 ml-18 -mt-1 min-w-max py-1 px-3 font-medium bg-orange-800 rounded-t-xl rounded-br-xl">We’re hiring!</div>
            </a>
          </div>
        </div>
        <div class="w-1/2 xl:w-auto flex flex-wrap items-center justify-center -mb-6"><a class="inline-block w-full lg:w-auto text-sm mb-6 mr-14" href="#">Plans</a><a class="inline-block w-full lg:w-auto text-sm mb-6 mr-14" href="#">How to Start</a><a class="inline-block w-full lg:w-auto text-sm mb-6" href="#">Download</a></div>
      </div>
      <h2 class="font-heading text-center text-4xl mt-20 mb-8">Get in touch!</h2>
      <div class="text-center mb-16"><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 mr-3 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">Live chat</a><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 mr-3 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">+44 0870 5576 00</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Send a message</a></div>
      <div class="text-center">
        <span class="text-gray-700">I already have an account</span>
        <a class="ml-4 inline-flex items-center font-medium text-green-900 hover:text-green-800" href="#">
          <span class="mr-2">Sign in</span>
          <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
          </svg>

<section class="relative pt-24 pb-40 bg-white">
  <div class="container px-4 mx-auto relative">
    <div class="sm:flex mb-32"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0" href="#">Select plan</a><a class="inline-block w-full sm:w-auto" href="#">Start a conversation</a></div>
    <div class="max-w-5xl mx-auto mb-32 text-center">
      <h2 class="font-heading text-4xl md:text-5xl xl:text-6xl mb-10">Cloud backup solutions for home and business</h2>
      <p class="text-gray-800 font-light">The house like a sense of truth that comes from within. The final game.</p>
    </div>
    <div class="flex flex-wrap justify-center items-end -mx-4 -mb-16">
      <div class="w-1/2 sm:w-1/3 md:w-1/4 xl:w-auto px-4 mb-16">
        <div class="max-w-xs mx-auto">
          <img class="block mx-auto mb-16" src="wrexa-assets/logos/brands/miro-clouds.svg" alt="">
          <div class="relative h-10 text-center">
            <div class="absolute top-0 right-1/2 transform translate-x-1/2 -mt-3 text-white">
              <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.16137 1.29115C6.55567 0.684092 7.44433 0.684092 7.83863 1.29115L13.7909 10.4553C14.223 11.1206 13.7456 12 12.9523 12H1.04771C0.254427 12 -0.22302 11.1206 0.209087 10.4553L6.16137 1.29115Z" fill="currentColor"></path>
              </svg>
            </div>
            <span>Miro</span>
          </div>
        </div>
      </div>
      <div class="w-1/2 sm:w-1/3 md:w-1/4 xl:w-auto px-4 mb-16">
        <div class="max-w-xs mx-auto">
          <img class="block mx-auto mb-16" src="wrexa-assets/logos/brands/spotify-clouds.svg" alt="">

<section class="pb-24 sm:pb-40 pt-24 bg-white relative overflow-hidden">
  <div class="hidden xl:block absolute top-0 left-0 w-8 h-full bg-white"></div>
  <div class="absolute bottom-0 left-0 xl:-mb-20 w-full">
    <img class="block mx-auto" src="wrexa-assets/elements/half-circles-triple.svg" alt="">
  </div>
  <img class="hidden xl:block absolute bottom-0 right-0 mr-80" src="wrexa-assets/images/women-point-left.png" alt="">
  <img class="hidden xl:block absolute bottom-0 right-0 mb-40 mr-20" src="wrexa-assets/images/men-drinkin-caffe-green-background.png" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl xl:ml-24">
      <div class="flex items-center mb-24">
        <span class="font-heading text-xl">00</span>
        <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
        <span class="font-heading text-xl">404</span>
      </div>
      <h2 class="font-heading text-5xl sm:text-6xl lg:text-7xl mb-6">Ups... Something has gone wrong.</h2>
      <p class="font-light mb-40 xl:mb-96">The house by the pond cras ornare, some chords for a three moments, like a sense of truth.</p>
      <div class="sm:flex">
        <a class="inline-flex mb-5 sm:mb-0 mr-16 items-center" href="#">
          <span class="mr-4">Back to home.</span>
          <span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
            </svg>
          </span>

<section>
  <div class="pt-10 pb-16 bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-start xl:items-center justify-center">
        <div class="w-1/2 xl:w-auto flex flex-wrap items-center justify-center xl:-mb-6">
          <a class="inline-block w-full lg:w-auto text-sm text-white hover:text-gray-200 mb-6 mr-14" href="#">Collection</a><a class="inline-block w-full lg:w-auto text-sm text-white hover:text-gray-200 mb-6 mr-14" href="#">Projects</a><a class="inline-block w-full lg:w-auto text-sm text-white hover:text-gray-200 mb-6 mr-14" href="#">About</a>
          <div class="w-full lg:w-auto md:mr-64 mb-6">
            <a class="inline-block text-sm text-white hover:text-gray-200 w-full sm:w-auto relative" href="#">
              <span>Careers</span>
              <div class="absolute top-0 left-0 ml-18 -mt-1 min-w-max py-1 px-3 text-gray-900 font-medium bg-orange-800 rounded-t-xl rounded-br-xl">We’re hiring!</div>
            </a>
          </div>
        </div>
        <div class="w-1/2 xl:w-auto flex flex-wrap items-center justify-center -mb-6"><a class="inline-block w-full lg:w-auto text-sm text-white hover:text-gray-200 mb-6 mr-14" href="#">Plans</a><a class="inline-block w-full lg:w-auto text-sm text-white hover:text-gray-200 mb-6 mr-14" href="#">How to Start</a><a class="inline-block w-full lg:w-auto text-sm text-white hover:text-gray-200 mb-6" href="#">Download</a></div>
      </div>
      <h2 class="font-heading text-center text-4xl text-white mt-20 mb-8">Get in touch!</h2>
      <div class="text-center mb-16"><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 mr-3 text-center text-white font-medium border border-gray-700 hover:border-gray-600 rounded" href="#">Live chat</a><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 mr-3 text-center text-white font-medium border border-gray-700 hover:border-gray-600 rounded" href="#">+44 0870 5576 00</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Send a message</a></div>
      <div class="text-center">
        <span class="text-gray-700">I already have an account</span>
        <a class="ml-4 inline-flex items-center font-medium text-green-900 hover:text-green-800" href="#">
          <span class="mr-2">Sign in</span>
          <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
          </svg>

<section class="relative pt-24 pb-24 md:pb-52 bg-gray-100 overflow-hidden">
  <div class="hidden lg:block absolute top-0 right-0 mt-40 mr-20 h-full">
    <a class="inline-block" href="#">
      <img class="w-16 h-16" src="wrexa-assets/logos/logo-wrexa.svg" alt="">
    </a>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-18">
      <span class="font-heading text-xl">02</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Creative team</span>
    </div>
    <div class="lg:hidden mb-12">
      <a class="inline-block" href="#">
        <img class="w-16 h-16" src="wrexa-assets/logos/logo-wrexa.svg" alt="">
      </a>
    </div>
    <div class="max-w-3xl xl:max-w-4xl mb-24 sm:mb-44">
      <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl mb-8">“Alone we can do so little, together we can do so much.”</h1>
      <p class="max-w-xl font-light">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game.</p>
    </div>
    <div class="flex -mx-4 pb-32">
      <div class="flex-shrink-0 w-60 sm:w-80 px-4">
        <img class="block mb-14 w-full object-coverrounded-md" src="wrexa-assets/images/team1.png" alt="">

<section>
  <div class="pt-24 md:pt-52 pb-40" style="background-image: url('/wrexa-assets/images/background-men-photo.png'); background-repeat: no-repeat; background-size: cover;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="max-w-lg">
            <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl xl:text-8xl text-white mb-20">
              <span class="block leading-none">Turnover.</span>
              <span class="block leading-none">Even more than you expect</span>
            </h1>
            <div>
              <a class="inline-flex mb-20 items-center text-white" href="#">
                <span class="mr-4">Exploring the shift of today</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap -mx-2">
            <div class="w-full md:w-3/5 px-2 mb-6 md:mb-0">
              <img class="block mx-auto md:-mb-20" src="wrexa-assets/images/mom-son-photo.png" alt="">

<section class="py-40">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center -mx-4 -mb-16">
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign-gray.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <img class="block mx-auto" src="wrexa-assets/logos/brands/british-business-bank-gray.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <img class="block mx-auto" src="wrexa-assets/logos/brands/fedex-gray.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <img class="block mx-auto" src="wrexa-assets/logos/brands/starlingbank-gray.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <img class="block mx-auto" src="wrexa-assets/logos/brands/zendesk-gray.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign-gray.svg" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center -mx-4 -mb-16">
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <div class="flex items-center justify-center 3xl:w-42 h-20 p-4 bg-white">
          <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <div class="flex items-center justify-center 3xl:w-42 h-20 p-4 bg-white">
          <img class="block mx-auto" src="wrexa-assets/logos/brands/britishbank.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <div class="flex items-center justify-center 3xl:w-42 h-20 p-4 bg-white">
          <img class="block mx-auto" src="wrexa-assets/logos/brands/fedex.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">
        <div class="flex items-center justify-center 3xl:w-42 h-20 p-4 bg-white">
          <img class="block mx-auto" src="wrexa-assets/logos/brands/starling.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-16">

<section class="py-40 bg-gray-100" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <div class="container px-4 mx-auto">
    <h2 class="text-center font-heading text-4xl mb-16">Trusted by brands all over the world</h2>
    <div class="max-w-5xl mx-auto mb-28">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center xl:justify-between items-center -mx-4 -mb-16">
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/britishbank.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/fedex.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/starling.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/zendesk.svg" alt="">
                      </div>
                    </div>

<section class="py-40 bg-gray-900" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <div class="container px-4 mx-auto">
    <h2 class="text-center font-heading text-4xl text-white mb-16">Trusted by brands all over the world</h2>
    <div class="max-w-5xl mx-auto mb-28">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center xl:justify-between items-center -mx-4 -mb-16">
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/british-business-bank-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/fedex-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/starlingbank-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/3 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/zendesk-gray.svg" alt="">
                      </div>
                    </div>

<section class="py-40 bg-gray-900" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <div class="container px-4 mx-auto">
    <h2 class="text-center font-heading text-4xl text-white mb-16">Trusted by brands all over the world</h2>
    <div class="max-w-5xl mx-auto mb-28">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center xl:justify-between items-center -mx-4 -mb-16">
                      <div class="w-1/2 sm:w-1/4 md:w-1/5 px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign-gray.svg" alt="">
                      </div>
                      <div class="w-1/2 sm:w-1/4 md:w-1/5 px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/british-business-bank-gray.svg" alt="">
                      </div>
                      <div class="w-1/2 sm:w-1/4 md:w-1/5 px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/fedex-gray.svg" alt="">
                      </div>
                      <div class="w-1/2 sm:w-1/4 md:w-1/5 px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/starlingbank-gray.svg" alt="">
                      </div>
                      <div class="w-1/2 sm:w-1/4 md:w-1/5 px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/zendesk-gray.svg" alt="">
                      </div>
                      <div class="w-1/2 sm:w-1/4 md:w-1/5 px-4 mb-16">

<section class="py-40 bg-gray-900" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <div class="container px-4 mx-auto">
    <h2 class="text-center font-heading text-xl text-white mb-16">Trusted by brands all over the world</h2>
    <div class="mb-28">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center xl:justify-between items-center -mx-4 -mb-16">
                      <div class="w-full sm:w-1/4 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/docusign-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/4 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/british-business-bank-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/4 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/fedex-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/4 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/starlingbank-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/4 xl:w-auto px-4 mb-16">
                        <img class="block mx-auto" src="wrexa-assets/logos/brands/zendesk-gray.svg" alt="">
                      </div>
                      <div class="w-full sm:w-1/4 xl:w-auto px-4 mb-16">

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-900">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-800" width="32" height="32" rx="6" fill="currentColor"></rect>

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

<section class="relative bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div x-data="{ mobileNavOpen: false }" class="bg-tarnsparent">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-50" width="32" height="32" rx="6" fill="currentColor"></rect>

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

<section class="relative bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div x-data="{ mobileNavOpen: false }" class="bg-transparent">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>