Tailwind CSS Components

<section class="relative pb-24 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="absolute top-0 right-0 flex w-full h-full lg:h-2/3 bg-orange-200" style="max-height: 850px;">
    <img class="w-64 md:w-80 2xl:w-auto self-start" src="nigodo-assets/background-elements/pattern-dots-orange-left.svg" alt="">
    <img class="w-64 md:w-80 2xl:w-auto self-end ml-auto" src="nigodo-assets/background-elements/pattern-dots-orange-right.svg" alt="">
    <img class="absolute bottom-0 transform translate-y-1/2" src="nigodo-assets/background-elements/pattern-horizontal-orange.svg" alt="">
  </div>
  <nav class="flex mb-20 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="pb-24 bg-purple-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-orange-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-orange-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-green-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-indigo-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-red-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-pink-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-gray-200" x-data="{ mobileNavOpen: false }">
  <nav class="flex mb-16 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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">

<section class="pb-24 bg-green-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-green-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-green-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-gray-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-gray-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-gray-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-purple-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-purple-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-purple-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-pink-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-pink-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-pink-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-red-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-red-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-red-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-orange-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-orange-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-orange-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-orange-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-orange-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-orange-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-24 bg-indigo-200 relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 md:h-full mt-24 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-indigo-right.svg" alt="">
  <img class="absolute top-0 md:h-full mt-24 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-indigo-left.svg" alt="">
  <nav class="flex mb-16 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">

<section class="pb-10" x-data="{ mobileNavOpen: false }">
  <nav class="flex 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="py-16 md:py-24 lg:pt-40 lg:pb-52 px-2 md:px-6 mx-4 md:mx-10 bg-orange-200 border-3 border-indigo-900 shadow-md rounded-2xl">
    <div class="container px-4 mx-auto relative">
      <div class="max-w-4xl mx-auto text-center">

<section class="pb-10" x-data="{ mobileNavOpen: false }">
  <nav class="flex 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="py-16 md:py-24 lg:pt-40 lg:pb-52 px-2 md:px-6 mx-4 md:mx-10 bg-gray-200 border-3 border-indigo-900 shadow-md rounded-2xl">
    <div class="container px-4 mx-auto relative">
      <div class="max-w-4xl mx-auto text-center">

<section class="pb-10" x-data="{ mobileNavOpen: false }">
  <nav class="flex 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="py-16 md:py-24 lg:pt-40 lg:pb-52 px-2 md:px-6 mx-4 md:mx-10 bg-indigo-200 border-3 border-indigo-900 shadow-md rounded-2xl">
    <div class="container px-4 mx-auto relative">
      <div class="max-w-4xl mx-auto text-center">