Tailwind CSS Components

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-color.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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">Our team is the best in the business.</h1>
    <p class="text-xl font-extrabold leading-8 mb-16">Highly professional and capable of running your business across all digital channels.</p>
    <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="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Dance is the hidden language of the soul.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" 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 h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-26 relative">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-indigo.svg" alt="">
  <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">

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 right-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-pink-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-pink-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <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 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 lg:w-1/4 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 lg:w-1/4 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/spotify.svg" alt="">
        </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 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/slack.svg" alt="">

<section class="py-26 xl:pb-32 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-pink-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-pink-right.svg" alt="">
  <div class="container px-4 mx-auto text-center relative">
    <span class="text-lg font-extrabold text-pink-500">Section label</span>
    <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">The fastest way from idea to live site. Period.</h1>
    <p class="max-w-4xl mx-auto text-xl font-extrabold leading-8 mb-12">Nigodo is a Small SaaS Business. Flex isn’t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
    <a class="inline-block w-full md:w-auto py-4 px-6 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="#">Get Started</a>
  </div>
</section>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/2 md:w-1/3" src="nigodo-assets/background-elements/pattern-dots-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-dots-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-smash-dots-purple-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-smash-dots-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center">
      <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>
    <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 class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/2 md:w-1/3" src="nigodo-assets/background-elements/pattern-dots-2-indigo-light-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-dots-2-indigo-light-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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>

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-white 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">
    <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-white relative overflow-hidden">
  <img class="absolute top-0 right-0 md:h-full w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-pink-right.svg" alt="">
  <img class="absolute top-0 left-0 md:h-full w-1/2 md:w-2/3" src="nigodo-assets/background-elements/pattern-dots-pink-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-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>

<section class="py-26 bg-white 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="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-pink-500">Section label</span>
      <h1 class="text-3xl md: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 class="fixed left-0 bottom-0 w-full max-w-4xl z-50 lg:pl-14 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-orange-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-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>

<section class="py-26 bg-white 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">
    <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">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-red-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-red.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-red.svg" alt="">

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-gray-200 py-6 px-10 relative">
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-14 h-14 items-center justify-center focus:outline-none text-white bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded">
      <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 class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <a class="text-lg font-bold" href="#">
        <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
      </a>
    </div>
    <div class="hidden xl:inline-flex w-full max-w-xs p-4 items-center bg-white border-2 border-indigo-900 rounded">
      <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>
      </a>
      <input class="bg-transparent px-3 text-lg font-extrabold text-indigo-900 placeholder-indigo-900 outline-none" type="search" placeholder="Search now">
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="relative hidden z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>

<section class="py-26 xl:pb-32 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-big-indigo-light-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-big-indigo-light-right.svg" alt="">
  <div class="container px-4 mx-auto text-center relative">
    <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">The fastest way from idea to live site. Period.</h1>
    <p class="max-w-4xl mx-auto text-xl font-extrabold leading-8 mb-12">Nigodo is a Small SaaS Business. Flex isn’t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
    <a class="inline-block w-full md:w-auto py-4 px-6 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="#">Get Started</a>
  </div>
</section>

<section class="py-26 xl:pb-32 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-indigo-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto text-center relative">
    <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">The fastest way from idea to live site. Period.</h1>
    <p class="max-w-4xl mx-auto text-xl font-extrabold leading-8 mb-12">Nigodo is a Small SaaS Business. Flex isn’t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
    <a class="inline-block w-full md:w-auto py-4 px-6 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="#">Get Started</a>
  </div>
</section>

<section class="py-26 bg-white 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">
    <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="">

<section class="py-26 xl:pb-32 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-gray-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-gray-right.svg" alt="">
  <div class="container px-4 mx-auto text-center relative">
    <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">The fastest way from idea to live site. Period.</h1>
    <p class="max-w-4xl mx-auto text-xl font-extrabold leading-8 mb-12">Nigodo is a Small SaaS Business. Flex isn’t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
    <a class="inline-block w-full md:w-auto py-4 px-6 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="#">Get Started</a>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-white py-6 px-10 relative">
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-14 h-14 items-center justify-center focus:outline-none text-white bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded">
      <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 class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <a class="text-lg font-bold" href="#">
        <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
      </a>
    </div>
    <div class="hidden xl:inline-flex w-full max-w-xs p-4 items-center bg-white border-2 border-indigo-900 rounded">
      <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>
      </a>
      <input class="bg-transparent px-3 text-lg font-extrabold text-indigo-900 placeholder-indigo-900 outline-none" type="search" placeholder="Search now">
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden relative z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>

<section class="py-26 bg-white 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="text-center mb-16">
      <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">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 xl:pb-32 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-orange-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-orange-right.svg" alt="">
  <div class="container px-4 mx-auto text-center relative">
    <span class="text-lg font-extrabold text-orange-500">Section label</span>
    <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">The fastest way from idea to live site. Period.</h1>
    <p class="max-w-4xl mx-auto text-xl font-extrabold leading-8 mb-12">Nigodo is a Small SaaS Business. Flex isn’t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
    <a class="inline-block w-full md:w-auto py-4 px-6 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="#">Get Started</a>
  </div>
</section>