Tailwind CSS Components

<section class="py-26 bg-white relative overflow-hidden">
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-4xl mx-auto text-center mb-16">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
      <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
    </div>
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0 text-center">
        <h3 class="text-2xl sm:text-3xl font-extrabold mb-6">Email</h3>
        <p class="text-xl sm:text-2xl font-bold text-indigo-400">contact@nigodo.co</p>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0 text-center">
        <h3 class="text-2xl sm:text-3xl font-extrabold mb-6">Phone</h3>
        <p class="text-xl sm:text-2xl font-bold text-indigo-400">+7-843-672-431</p>
      </div>
      <div class="w-full lg:w-1/3 px-4 text-center">
        <h3 class="text-2xl sm:text-3xl font-extrabold mb-6">Socials</h3>
        <div class="flex items-center justify-center">
          <a class="inline-block mr-6 text-indigo-400 hover:text-gray-500" href="#">
            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63482 17.7272V9.766H9.35818L9.76676 6.66243H6.63482V4.68126C6.63482 3.78299 6.88809 3.17083 8.20285 3.17083L9.877 3.17015V0.394215C9.58748 0.357312 8.59366 0.272705 7.43696 0.272705C5.02158 0.272705 3.36797 1.71878 3.36797 4.37389V6.66243H0.636353V9.766H3.36797V17.7272H6.63482Z" fill="currentColor"></path>
            </svg>
          </a>

<section class="py-26 bg-green-200 relative overflow-hidden">
  <img class="absolute bottom-0 xl:top-0 right-0 w-1/3 2xl:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-green-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:w-2/3 2xl:h-full" src="nigodo-assets/background-elements/pattern-dots-green-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-12 px-6 md:p-20 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
          <span class="text-lg font-extrabold text-green-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">The fastest way from idea to live site. Period.</h1>
          <p class="font-extrabold leading-8">Nigodo is a Small SaaS Business. Flex isn’t a traditional company.</p>
        </div>
        <div class="w-full lg:w-2/5 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full 2xl:w-auto py-4 px-6 mb-4 2xl:mb-0 2xl:mr-4 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="#">Request a demo</a><a class="inline-block w-full 2xl:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <img class="absolute bottom-0 xl:top-0 right-0 w-1/3 2xl:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:w-2/3 2xl:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-12 px-6 md:p-20 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
          <span class="text-lg font-extrabold text-purple-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">The fastest way from idea to live site. Period.</h1>
          <p class="font-extrabold leading-8">Nigodo is a Small SaaS Business. Flex isn’t a traditional company.</p>
        </div>
        <div class="w-full lg:w-2/5 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full 2xl:w-auto py-4 px-6 mb-4 2xl:mb-0 2xl:mr-4 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="#">Request a demo</a><a class="inline-block w-full 2xl:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 lg:-mt-64 md:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-orange-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/2 md:w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <span class="text-lg font-extrabold text-orange-500">Section label</span>
        <h1 class="text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
        <p class="text-xl font-extrabold leading-8">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="md:flex justify-between items-center">
            <div class="w-full md:w-1/2 xl:w-2/3 mb-6 md:mb-0">
              <h4 class="text-2xl font-extrabold mb-6">Front-end Developer</h4>
              <p class="font-extrabold leading-6">We’re looking for a mid-level Front-end Developer to join our team.</p>
            </div>
            <a class="inline-block w-full md:w-auto py-3 px-5 text-center leading-6 text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
          </div>
        </div>
        <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="md:flex justify-between items-center">
            <div class="w-full md:w-1/2 xl:w-2/3 mb-6 md:mb-0">
              <h4 class="text-2xl font-extrabold mb-6">Front-end Developer</h4>

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute bottom-0 lg:top-0 right-0 lg:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-orange-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 lg:h-full" src="nigodo-assets/background-elements/pattern-dots-2-orange-left.svg" alt="">
  <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-14 lg:mb-0">
        <span class="text-lg font-extrabold text-orange-500">Our Clients</span>
        <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mt-2 mb-10">Trusted by the top companies in this industry</h1>
        <p class="text-xl font-extrabold leading-8">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
              <img src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
              <img src="nigodo-assets/logo-clouds/google.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
            <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">

<section class="py-26 bg-red-200 relative overflow-hidden">
  <img class="absolute bottom-0 xl:top-0 right-0 w-1/3 2xl:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-red-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:w-2/3 2xl:h-full" src="nigodo-assets/background-elements/pattern-dots-red-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-12 px-6 md:p-20 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
          <span class="text-lg font-extrabold text-red-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">The fastest way from idea to live site. Period.</h1>
          <p class="font-extrabold leading-8">Nigodo is a Small SaaS Business. Flex isn’t a traditional company.</p>
        </div>
        <div class="w-full lg:w-2/5 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full 2xl:w-auto py-4 px-6 mb-4 2xl:mb-0 2xl:mr-4 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="#">Request a demo</a><a class="inline-block w-full 2xl:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 md:py-32 min-h-screen md:min-h-0 bg-purple-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-right.svg" alt="">
  <img class="absolute top-0 left-0 w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <img class="block w-full mx-auto mb-12 h-64 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
    <div class="max-w-xl text-center mx-auto">
      <span class="inline-flex mb-4 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Oh no! Error 404</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-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="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-2/3" src="nigodo-assets/background-elements/pattern-smash-dots-purple-left.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-0 right-0 w-2/5 xl:-mt-12" src="nigodo-assets/newsletter/laptop-half-right.svg" alt="">
    <div class="container px-4 mx-auto">
      <div class="w-full lg:w-2/3 xl:py-24">
        <span class="text-lg font-extrabold text-purple-500">Newsletter</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
        <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
        <div class="md:flex -mx-2 mb-2">
          <div class="w-full md:w-auto px-2 mb-2 md:mb-0">
            <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
          </div>
          <div class="w-full md:w-auto px-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
        </div>
        <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
      </div>
    </div>
    <img class="block w-full lg:hidden mt-14" src="nigodo-assets/newsletter/laptop-half-right.svg" alt="">
  </div>
</section>

<section class="py-26 bg-red-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-red.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-red-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <img class="block mb-6 w-full h-80 border-3 border-indigo-900 rounded-2xl shadow-md object-cover" src="nigodo-assets/team/photo-1.jpg" alt="">
        <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Kacy Wade</h2>
        <span class="text-lg text-red-500">Customer Success</span>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <img class="block mb-6 w-full h-80 border-3 border-indigo-900 rounded-2xl shadow-md object-cover" src="nigodo-assets/team/photo-2.jpg" alt="">
        <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Jo Mathews</h2>
        <span class="text-lg text-red-500">CTO</span>
      </div>

<section class="py-26 bg-pink-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-2/3 md:w-1/3 xl:w-auto" src="nigodo-assets/background-elements/pattern-smash-dots-pink-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/3 xl:w-auto" src="nigodo-assets/background-elements/pattern-two-smashes-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="h-full max-w-md mx-auto py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-message.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-6">Measure your performance</h4>
          <p class="font-extrabold leading-7">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="h-full max-w-md mx-auto py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-bar.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-6">Custom analytics</h4>
          <p class="font-extrabold leading-7">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="h-full max-w-md mx-auto py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-people.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-6">Team Management</h4>
          <p class="font-extrabold leading-7">Our calendar lets you know what is happening with customer and projects so you.</p>

<section class="py-26 bg-white relative overflow-hidden">
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-4xl mx-auto text-center mb-16">
      <span class="text-lg font-extrabold text-orange-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
      <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
    </div>
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0 text-center">
        <h3 class="text-2xl sm:text-3xl font-extrabold mb-6">Email</h3>
        <p class="text-xl sm:text-2xl font-bold text-orange-400">contact@nigodo.co</p>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0 text-center">
        <h3 class="text-2xl sm:text-3xl font-extrabold mb-6">Phone</h3>
        <p class="text-xl sm:text-2xl font-bold text-orange-400">+7-843-672-431</p>
      </div>
      <div class="w-full lg:w-1/3 px-4 text-center">
        <h3 class="text-2xl sm:text-3xl font-extrabold mb-6">Socials</h3>
        <div class="flex items-center justify-center">
          <a class="inline-block mr-6 text-orange-400 hover:text-gray-500" href="#">
            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63482 17.7272V9.766H9.35818L9.76676 6.66243H6.63482V4.68126C6.63482 3.78299 6.88809 3.17083 8.20285 3.17083L9.877 3.17015V0.394215C9.58748 0.357312 8.59366 0.272705 7.43696 0.272705C5.02158 0.272705 3.36797 1.71878 3.36797 4.37389V6.66243H0.636353V9.766H3.36797V17.7272H6.63482Z" fill="currentColor"></path>
            </svg>
          </a>

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full mt-24 md:mt-0" src="nigodo-assets/background-elements/pattern-center-dots-purple.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-3xl mx-auto text-center mb-16">
      <span class="text-lg font-extrabold text-purple-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-6">Let’s stay connected</h1>
      <p class="text-xl font-extrabold leading-7">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="h-full p-10 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex items-center justify-center w-18 h-18 mb-4 rounded-full bg-purple-200">
            <span class="text-3xl font-extrabold">1</span>
          </div>
          <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
          <p class="font-bold leading-6">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="h-full p-10 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex items-center justify-center w-18 h-18 mb-4 rounded-full bg-green-200">
            <span class="text-3xl font-extrabold">2</span>
          </div>
          <h3 class="text-2xl font-extrabold mb-4">Custom analytics</h3>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto">
      <div class="text-center mb-8">
        <a class="inline-block mx-auto mb-6" href="#">
          <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
        </a>
        <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
        <p class="text-lg font-extrabold leading-7 text-indigo-500">Start your journey with our product</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Name</label>
          <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
        </div>
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Email</label>
          <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
        </div>
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Password</label>
          <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
        </div>
        <button class="inline-block w-full py-4 px-6 mb-6 text-center text-lg leading-6 text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200">Sign Up</button>

<section class="py-26 bg-gray-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-gray.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-3xl mx-auto text-center mb-16">
      <span class="text-lg font-extrabold text-gray-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">We believe in the power of data</h1>
      <p class="text-xl font-extrabold leading-8">Nigodo is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full xl:w-1/2 px-4 mb-14 xl:mb-0">
        <div class="flex flex-wrap -mx-4 -mb-8">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex flex-col items-center justify-center p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
              <div>
                <h3 class="text-3xl md:text-4xl font-extrabold mb-3">235.000</h3>
                <h4 class="text-xl font-extrabold mb-4">Projects completed</h4>
                <p class="text-gray-400 font-extrabold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex h-full items-center justify-center p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
              <div class="flex flex-col h-full">
                <h3 class="text-3xl md:text-4xl font-extrabold mb-3">$10M</h3>

<section class="py-26 md:py-32 min-h-screen md:min-h-0 bg-green-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-green-right.svg" alt="">
  <img class="absolute top-0 left-0 w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-green-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <img class="block w-full mx-auto mb-12 h-64 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
    <div class="max-w-xl text-center mx-auto">
      <span class="inline-flex mb-4 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Oh no! Error 404</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-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="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-red-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-2/3" src="nigodo-assets/background-elements/pattern-smash-dots-red-left.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-0 right-0 w-2/5 xl:-mt-12" src="nigodo-assets/newsletter/laptop-half-right.svg" alt="">
    <div class="container px-4 mx-auto">
      <div class="w-full lg:w-2/3 xl:py-24">
        <span class="text-lg font-extrabold text-red-500">Newsletter</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
        <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
        <div class="md:flex -mx-2 mb-2">
          <div class="w-full md:w-auto px-2 mb-2 md:mb-0">
            <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
          </div>
          <div class="w-full md:w-auto px-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
        </div>
        <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
      </div>
    </div>
    <img class="block w-full lg:hidden mt-14" src="nigodo-assets/newsletter/laptop-half-right.svg" alt="">
  </div>
</section>

<section class="py-26 bg-pink-200 relative overflow-hidden">
  <img class="absolute top-0 lg:-mt-64 md:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-pink-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/2 md:w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <span class="text-lg font-extrabold text-pink-500">Section label</span>
        <h1 class="text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
        <p class="text-xl font-extrabold leading-8">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="md:flex justify-between items-center">
            <div class="w-full md:w-1/2 xl:w-2/3 mb-6 md:mb-0">
              <h4 class="text-2xl font-extrabold mb-6">Front-end Developer</h4>
              <p class="font-extrabold leading-6">We’re looking for a mid-level Front-end Developer to join our team.</p>
            </div>
            <a class="inline-block w-full md:w-auto py-3 px-5 text-center leading-6 text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
          </div>
        </div>
        <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="md:flex justify-between items-center">
            <div class="w-full md:w-1/2 xl:w-2/3 mb-6 md:mb-0">
              <h4 class="text-2xl font-extrabold mb-6">Front-end Developer</h4>

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-orange.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-orange-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <img class="block mb-6 w-full h-80 border-3 border-indigo-900 rounded-2xl shadow-md object-cover" src="nigodo-assets/team/photo-1.jpg" alt="">
        <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Kacy Wade</h2>
        <span class="text-lg text-orange-500">Customer Success</span>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <img class="block mb-6 w-full h-80 border-3 border-indigo-900 rounded-2xl shadow-md object-cover" src="nigodo-assets/team/photo-2.jpg" alt="">
        <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Jo Mathews</h2>
        <span class="text-lg text-orange-500">CTO</span>
      </div>

<section class="py-26 md:py-32 min-h-screen md:min-h-0 bg-pink-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-pink-right.svg" alt="">
  <img class="absolute top-0 left-0 w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-pink-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <img class="block w-full mx-auto mb-12 h-64 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
    <div class="max-w-xl text-center mx-auto">
      <span class="inline-flex mb-4 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Oh no! Error 404</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-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="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-pink-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-pink.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-pink-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <img class="block mb-6 w-full h-80 border-3 border-indigo-900 rounded-2xl shadow-md object-cover" src="nigodo-assets/team/photo-1.jpg" alt="">
        <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Kacy Wade</h2>
        <span class="text-lg text-pink-500">Customer Success</span>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <img class="block mb-6 w-full h-80 border-3 border-indigo-900 rounded-2xl shadow-md object-cover" src="nigodo-assets/team/photo-2.jpg" alt="">
        <h2 class="text-2xl md:text-3xl font-extrabold mb-2">Jo Mathews</h2>
        <span class="text-lg text-pink-500">CTO</span>
      </div>