Tailwind CSS Components

<section class="py-26 bg-pink-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-pink-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</p>
            </div>

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto">
    <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">Business is only as good as its tools.</h1>
    <p class="text-xl font-extrabold leading-8 mb-16">Pricing that scales with your business immediately.</p>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="text-center mb-12">
            <span class="block text-lg font-extrabold text-gray-500 leading-7">Custom Tag</span>
            <h2 class="text-2xl font-extrabold mb-6">Basic Plan</h2>
            <div class="flex justify-center items-start mb-2">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-3xl md:text-4xl font-extrabold">10/mth</span>
            </div>
            <p class="text-lg font-extrabold leading-7">Billed annually</p>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-gray.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-gray.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>

<section class="bg-orange-200">
  <div class="pt-26 border-3 border-l-0 border-r-0 border-indigo-900">
    <div class="pb-16 border-b-3 border-indigo-900">
      <div class="container px-4 mx-auto text-center">
        <a class="inline-block mx-auto mb-20" href="#">
          <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
        </a>
        <div class="flex flex-wrap -mx-4 -mb-6 justify-center">
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Product</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Features</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Pricing</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Careers</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Help</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <p class="text-center text-xl md:text-2xl font-extrabold">© 2022 Nigodo. All rights reserved.</p>
    </div>
  </div>
</section>

<div class="fixed left-0 bottom-0 w-full z-50 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-12 px-6 md:px-14 bg-red-200 border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="max-w-xl">
            <p class="text-xl font-bold leading-8 mb-6">We use third-party cookies in order to personalise your experience</p>
            <a class="inline-flex items-center text-xl leading-7 text-red-500 hover:underline" href="#">
              <span class="mr-2">Read our cookie policy</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.82994 5.29001L2.58994 1.05001C2.49698 0.956281 2.38638 0.881887 2.26452 0.831118C2.14266 0.780349 2.01195 0.754211 1.87994 0.754211C1.74793 0.754211 1.61723 0.780349 1.49537 0.831118C1.37351 0.881887 1.26291 0.956281 1.16994 1.05001C0.983692 1.23737 0.87915 1.49082 0.87915 1.75501C0.87915 2.0192 0.983692 2.27265 1.16994 2.46001L4.70994 6.00001L1.16994 9.54001C0.983692 9.72737 0.87915 9.98082 0.87915 10.245C0.87915 10.5092 0.983692 10.7626 1.16994 10.95C1.26338 11.0427 1.3742 11.116 1.49604 11.1658C1.61787 11.2155 1.74834 11.2408 1.87994 11.24C2.01155 11.2408 2.14201 11.2155 2.26385 11.1658C2.38569 11.116 2.4965 11.0427 2.58994 10.95L6.82994 6.71001C6.92367 6.61705 6.99806 6.50645 7.04883 6.38459C7.0996 6.26273 7.12574 6.13202 7.12574 6.00001C7.12574 5.868 7.0996 5.73729 7.04883 5.61543C6.99806 5.49357 6.92367 5.38297 6.82994 5.29001Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a x-on:click.prevent="open=false" 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 hover:text-white hover:bg-indigo-800 font-extrabold bg-white border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Decline</a><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto 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="#">Allow</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="py-26 bg-purple-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-purple-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</p>
            </div>

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <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">Application</span>
      <h1 class="text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">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 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="#">Request a demo</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>
</section>

<div class="fixed left-0 bottom-0 w-full z-50 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-12 px-6 md:px-14 bg-gray-200 border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="max-w-xl">
            <p class="text-xl font-bold leading-8 mb-6">We use third-party cookies in order to personalise your experience</p>
            <a class="inline-flex items-center text-xl leading-7 text-gray-500 hover:underline" href="#">
              <span class="mr-2">Read our cookie policy</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.82994 5.29001L2.58994 1.05001C2.49698 0.956281 2.38638 0.881887 2.26452 0.831118C2.14266 0.780349 2.01195 0.754211 1.87994 0.754211C1.74793 0.754211 1.61723 0.780349 1.49537 0.831118C1.37351 0.881887 1.26291 0.956281 1.16994 1.05001C0.983692 1.23737 0.87915 1.49082 0.87915 1.75501C0.87915 2.0192 0.983692 2.27265 1.16994 2.46001L4.70994 6.00001L1.16994 9.54001C0.983692 9.72737 0.87915 9.98082 0.87915 10.245C0.87915 10.5092 0.983692 10.7626 1.16994 10.95C1.26338 11.0427 1.3742 11.116 1.49604 11.1658C1.61787 11.2155 1.74834 11.2408 1.87994 11.24C2.01155 11.2408 2.14201 11.2155 2.26385 11.1658C2.38569 11.116 2.4965 11.0427 2.58994 10.95L6.82994 6.71001C6.92367 6.61705 6.99806 6.50645 7.04883 6.38459C7.0996 6.26273 7.12574 6.13202 7.12574 6.00001C7.12574 5.868 7.0996 5.73729 7.04883 5.61543C6.99806 5.49357 6.92367 5.38297 6.82994 5.29001Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a x-on:click.prevent="open=false" 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 hover:text-white hover:bg-indigo-800 font-extrabold bg-white border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Decline</a><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto 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="#">Allow</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="py-26 bg-purple-200">
  <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">Sign in</h2>
        <p class="text-lg font-extrabold leading-7 text-purple-500">Start your demo version</p>
      </div>
      <form action="">
        <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>
        <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
          <div class="w-full lg:w-auto px-4 mb-4 lg:mb-0">
            <label for="">
              <input type="checkbox">
              <span class="ml-1 font-extrabold">Remember me</span>

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-lg font-extrabold text-orange-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>
    <div class="max-w-lg mx-auto">
      <div class="flex flex-wrap -mx-2 justify-center">
        <div class="flex-grow w-full md:w-auto px-2 mb-2">
          <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 mb-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 text-center 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 class="w-full px-2">
          <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-orange-200 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:inline-flex w-full max-w-xs p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
      <a class="text-indigo-900 hover:text-indigo-800" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></path>
        </svg>

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full 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-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">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-12">
        <div class="h-full 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-4">Custom analytics</h4>
          <p class="text-lg 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 md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-green-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</p>
            </div>

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>

<section class="py-26 bg-red-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <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-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full 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-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">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-12">
        <div class="h-full 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-4">Custom analytics</h4>
          <p class="text-lg 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 md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-gray-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 mb-16">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 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">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Front-end Developer</h4>
          <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="#">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">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Back-end Developer</h4>
          <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="#">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">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">UI/UX Designer</h4>
          <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="#">View Job</a>
        </div>
      </div>

<section class="py-26 bg-pink-200" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block mb-3 text-lg font-extrabold text-pink-500">Quotes</span>
      <div class="flex flex-wrap lg:flex-nowrap -mx-4">
        <div class="hidden md:block self-start px-4 text-pink-300">
          <svg width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="w-full lg:w-auto py-6 lg:py-0 px-4">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                  <div x-ref="slide1" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                      <span class="text-pink-400 font-bold">CEO &amp; Founder at Nigodo</span>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                      <span class="text-pink-400 font-bold">Co-Founder of FlexPro Solutions</span>

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Page not found</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-orange-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <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">Application</span>
      <h1 class="text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">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 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="#">Request a demo</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>
</section>

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-purple-200 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:inline-flex w-full max-w-xs p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
      <a class="text-indigo-900 hover:text-indigo-800" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></path>
        </svg>