Tailwind CSS Components

<section class="py-16 bg-indigo-500">
  <div class="container px-3 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full px-4 mb-8">
          <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
            <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-headphones-horizontal.png" alt="">
              <div class="absolute bottom-0 left-0 p-8 w-full">
                <span class="block text-xs text-white font-black">Banner label</span>
                <h4 class="text-3xl font-black text-white">Banner Hero</h4>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/3 px-4 mb-8">
          <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
            <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner2.png" alt="">
              <div class="absolute bottom-0 left-0 p-8 w-full">
                <span class="block text-xs text-white font-black">Banner label</span>
                <h4 class="text-xl font-black text-white">Banner Hero</h4>
              </div>
            </div>

<section class="py-6 bg-white">
  <div class="container px-3 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/3 px-4 mb-8">
        <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
          <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner1.png" alt="">
            <div class="absolute bottom-0 left-0 p-8 w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/3 px-4 mb-8">
        <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
          <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner2.png" alt="">
            <div class="absolute bottom-0 left-0 p-8 w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </div>
        </a>

<section class="py-6 bg-white">
  <div class="container px-3 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full px-4 mb-8">
        <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
          <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-headphones-horizontal.png" alt="">
            <div class="absolute bottom-0 left-0 p-8 w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-3xl font-black text-white">Banner Hero</h4>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/3 px-4 mb-8">
        <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
          <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner2.png" alt="">
            <div class="absolute bottom-0 left-0 p-8 w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </div>
        </a>

<section class="py-16 bg-indigo-500">
  <div class="container px-3 mx-auto">
    <div class="max-w-6xl mx-auto">
      <a class="group block h-112 lg:h-150 bg-blueGray-900 rounded-md relative" href="#">
        <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
          <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner1.png" alt="">
          <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center w-full">
            <span class="block text-xs text-white font-black">Banner label</span>
            <h4 class="text-2xl md:text-4xl font-black text-white">Banner Hero</h4>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

<section class="py-6 bg-white">
  <div class="container px-3 mx-auto">
    <a class="group block h-112 lg:h-150 bg-blueGray-900 rounded-md relative" href="#">
      <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
        <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner1.png" alt="">
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center w-full">
          <span class="block text-xs text-white font-black">Banner label</span>
          <h4 class="text-2xl md:text-4xl font-black text-white">Banner Hero</h4>
        </div>
      </div>
    </a>
  </div>
</section>

<section>
  <div class="relative">
    <img class="img-fluid w-full h-112 md:h-150 object-cover" src="shopal-assets/images/banner-large.png" alt="">
    <div class="absolute top-1/2 left-0 w-full px-5 text-center transform -translate-y-1/2">
      <h4 class="text-4xl font-medium text-white">Banner Hero</h4>
    </div>
  </div>
</section>

<section class="py-16 bg-white">
  <div class="container px-3 mx-auto">
    <div class="max-w-6xl mx-auto">
      <a class="group block h-112 lg:h-150 bg-blueGray-900 rounded-md relative" href="#">
        <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
          <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner1.png" alt="">
          <div class="absolute bottom-0 left-0 p-8 w-full">
            <span class="block text-xs text-white font-black">Banner label</span>
            <h4 class="text-2xl md:text-4xl font-black text-white">Banner Hero</h4>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

<section class="py-6 bg-white">
  <div class="container px-3 mx-auto">
    <a class="group block h-112 lg:h-150 bg-blueGray-900 rounded-md relative" href="#">
      <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
        <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner1.png" alt="">
        <div class="absolute bottom-0 left-0 p-8 w-full">
          <span class="block text-xs text-white font-black">Banner label</span>
          <h4 class="text-2xl md:text-4xl font-black text-white">Banner Hero</h4>
        </div>
      </div>
    </a>
  </div>
</section>

<section>
  <div class="relative">
    <img class="img-fluid w-full h-112 md:h-150 object-cover" src="shopal-assets/images/banner-large.png" alt="">
    <div class="absolute bottom-0 left-0 p-8 w-full">
      <span class="block text-xs text-white font-black">Banner label</span>
      <h4 class="text-2xl md:text-4xl font-black text-white">Banner Hero</h4>
    </div>
  </div>
</section>

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-green-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-pink-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-orange-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-purple-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-gray-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-orange-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-indigo-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-red-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

<section class="relative pb-24 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden md:flex md:flex-col pt-20 pl-20 pb-20 justify-between items-start absolute top-0 right-0 w-36 sm:w-1/2 lg:w-1/3 h-full bg-orange-200">
    <img class="absolute top-0 left-0 h-full -ml-px" src="nigodo-assets/background/border-pattern-left-orange.svg" alt="">
    <img src="nigodo-assets/background-elements/pattern-smash-dots-orange-right.svg" alt="">
    <img class="lg:w-2/3 ml-auto" src="nigodo-assets/background-elements/pattern-smash-big-orange-right.svg" alt="">
  </div>
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>

<section class="relative pb-24 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden md:flex md:flex-col pt-20 pl-20 pb-20 justify-between items-start absolute top-0 right-0 w-36 sm:w-1/2 lg:w-1/3 h-full bg-indigo-200">
    <img class="absolute top-0 left-0 h-full -ml-px" src="nigodo-assets/background/border-pattern-left-indigo.svg" alt="">
    <img src="nigodo-assets/background-elements/pattern-smash-dots-indigo-right.svg" alt="">
    <img class="lg:w-2/3 ml-auto" src="nigodo-assets/background-elements/pattern-smash-big-indigo-right.svg" alt="">
  </div>
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>

<section class="relative pb-24 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden md:flex md:flex-col pt-20 pl-20 pb-20 justify-between items-start absolute top-0 right-0 w-36 sm:w-1/2 lg:w-1/3 h-full bg-green-200">
    <img class="absolute top-0 left-0 h-full -ml-px" src="nigodo-assets/background/border-pattern-left-green.svg" alt="">
    <img src="nigodo-assets/background-elements/pattern-smash-dots-green-right.svg" alt="">
    <img class="lg:w-2/3 ml-auto" src="nigodo-assets/background-elements/pattern-smash-big-green-right.svg" alt="">
  </div>
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>