Tailwind CSS Components

<section class="py-26 md:py-32 min-h-screen md:min-h-0 bg-gray-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 mt-14 lg:mt-0 order-last lg:order-first">
        <img class="block w-full h-112 mx-auto max-w-md object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md mx-auto lg:max-w-none">
          <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"><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>
    </div>
  </div>
</section>

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 lg:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/slack.svg" alt="">
        </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="py-16 px-4 lg:px-20 bg-white border-3 border-pink-900 rounded-2xl shadow-md text-center">
      <div class="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>

<section class="bg-red-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">
        <div class="flex flex-wrap justify-between items-center">
          <div class="w-full lg:w-auto mb-12 lg:mb-0">
            <a class="inline-block mx-auto" href="#">
              <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
            </a>
          </div>
          <div class="w-full lg:w-auto mb-12 lg:mb-0">
            <div class="flex flex-wrap items-center justify-center"><a class="inline-block mr-4 md:mr-16 2xl:mr-20 text-lg font-extrabold hover:text-indigo-800" href="#">Product</a><a class="inline-block mr-4 md:mr-16 2xl:mr-20 text-lg font-extrabold hover:text-indigo-800" href="#">Features</a><a class="inline-block mr-4 md:mr-16 2xl:mr-20 text-lg font-extrabold hover:text-indigo-800" href="#">Pricing</a><a class="inline-block text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          </div>
          <div class="w-full lg:w-auto flex items-center justify-center">
            <a class="inline-block text-indigo-900 hover:text-indigo-800 mr-8" href="#">
              <svg width="17" height="30" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block text-indigo-900 hover:text-indigo-800 mr-8" href="#">
              <svg width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>

<div class="fixed left-0 bottom-0 w-full z-50 bg-orange-200 border-3 border-indigo-900" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-14">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div>
            <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-orange-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/2 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>

<div class="fixed left-0 bottom-0 w-full z-50 bg-red-200 border-3 border-indigo-900" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-14">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div>
            <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/2 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-orange-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 xl:w-2/3 px-4 mb-8">
        <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">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="md:flex max-w-lg -mx-2 mb-2">
          <div class="flex-grow 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 w-full md:w-auto items-center justify-center 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>
  </div>
</section>

<section class="py-26 bg-gray-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 xl:w-2/3 px-4 mb-8">
        <span class="text-lg font-extrabold text-gray-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">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="md:flex max-w-lg -mx-2 mb-2">
          <div class="flex-grow 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 w-full md:w-auto items-center justify-center 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>
  </div>
</section>

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <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="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <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>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <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-indigo-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 xl:w-2/3 px-4 mb-8">
        <span class="text-lg font-extrabold text-indigo-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">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="md:flex max-w-lg -mx-2 mb-2">
          <div class="flex-grow 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 w-full md:w-auto items-center justify-center 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>
  </div>
</section>

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 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-4">Gain more insight into how people use your</h1>
        <p class="text-xl font-extrabold">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="relative">
          <img class="block w-full h-80 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
          <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-20 h-20 bg-indigo-900 hover:bg-indigo-800 rounded-full" href="#">
            <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.6666 8L6.86665 0.666667C6.19998 0.266667 5.39998 0 4.59998 0C2.06665 0 0.0666504 2 0.0666504 4.53333V19.4667C0.0666504 22 2.06665 24 4.59998 24C5.39998 24 6.19998 23.7333 6.86665 23.3333L19.8 15.8667C20.4667 15.4667 21 14.9333 21.4 14.2667C22.6 12.1333 21.9333 9.33333 19.6666 8Z" fill="#F7F9FB"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-10">
      <div class="w-full sm:w-1/2 md:w-1/3 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>

<section class="py-26 bg-purple-200">
  <div class="container px-4 mx-auto">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 lg:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/slack.svg" alt="">
        </div>
      </div>

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-gray-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Gain more insight into how people use your</h1>
        <p class="text-xl font-extrabold">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="relative">
          <img class="block w-full h-80 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
          <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-20 h-20 bg-indigo-900 hover:bg-indigo-800 rounded-full" href="#">
            <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.6666 8L6.86665 0.666667C6.19998 0.266667 5.39998 0 4.59998 0C2.06665 0 0.0666504 2 0.0666504 4.53333V19.4667C0.0666504 22 2.06665 24 4.59998 24C5.39998 24 6.19998 23.7333 6.86665 23.3333L19.8 15.8667C20.4667 15.4667 21 14.9333 21.4 14.2667C22.6 12.1333 21.9333 9.33333 19.6666 8Z" fill="#F7F9FB"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-10">
      <div class="w-full sm:w-1/2 md:w-1/3 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>

<section class="py-26 bg-pink-200">
  <div class="container px-4 mx-auto relative">
    <h1 class="max-w-2xl text-3xl md:text-4xl font-extrabold font-heading mb-16">We create world-class development and branding</h1>
    <div class="flex flex-wrap -mx-4 -mb-16">
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
          <img class="block mb-6" 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 mb-8">Stay connected with your team and make quick decisions wherever you are.</p>
          <a class="text-lg font-extrabold text-pink-500 hover:underline" href="#">Learn More</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
          <img class="block mb-6" 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 mb-8">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          <a class="text-lg font-extrabold text-pink-500 hover:underline" href="#">Learn More</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
          <img class="block mb-6" src="nigodo-assets/features/icon-people.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Team Management</h4>

<section class="py-26 bg-orange-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 xl:w-2/3 px-4 mb-8">
        <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">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="md:flex max-w-lg -mx-2 mb-2">
          <div class="flex-grow 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 w-full md:w-auto items-center justify-center 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>
  </div>
</section>

<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 xl:w-2/3 px-4 mb-8">
        <span class="text-lg font-extrabold text-pink-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">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="md:flex max-w-lg -mx-2 mb-2">
          <div class="flex-grow 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 w-full md:w-auto items-center justify-center 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>
  </div>
</section>

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-xl mx-auto">
          <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">Application</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
          <p class="text-xl font-extrabold leading-7 mb-6">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <div class="lg:flex">
            <a class="inline-block mr-4" href="#">
              <img src="nigodo-assets/apps/appstore.svg" alt="">
            </a>
            <a class="inline-block" href="#">
              <img src="nigodo-assets/apps/google.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="nigodo-assets/apps/two-phones.svg" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-red-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-red-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Gain more insight into how people use your</h1>
        <p class="text-xl font-extrabold">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="relative">
          <img class="block w-full h-80 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
          <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-20 h-20 bg-indigo-900 hover:bg-indigo-800 rounded-full" href="#">
            <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.6666 8L6.86665 0.666667C6.19998 0.266667 5.39998 0 4.59998 0C2.06665 0 0.0666504 2 0.0666504 4.53333V19.4667C0.0666504 22 2.06665 24 4.59998 24C5.39998 24 6.19998 23.7333 6.86665 23.3333L19.8 15.8667C20.4667 15.4667 21 14.9333 21.4 14.2667C22.6 12.1333 21.9333 9.33333 19.6666 8Z" fill="#F7F9FB"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-10">
      <div class="w-full sm:w-1/2 md:w-1/3 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>

<section class="py-26 bg-red-200">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto text-center mb-16">
      <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">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 -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>

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto">
    <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-indigo-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="text-xl 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 xl:w-auto py-4 px-6 mb-4 xl:mb-0 xl: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 xl: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>
</section>