Tailwind CSS Components

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

<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">
        <div class="flex flex-wrap -mx-4 justify-between">
          <div class="w-full md:w-auto xl:w-1/3 px-4 mb-14 xl:mb-0">
            <a class="inline-block mx-auto mb-12" href="#">
              <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
            </a>
            <div class="flex flex-wrap justify-between items-center -mb-6"><a class="inline-block w-full md:w-auto md:mr-6 mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Product</a><a class="inline-block w-full md:w-auto md:mr-6 mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Features</a><a class="inline-block w-full md:w-auto md:mr-6 mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Pricing</a><a class="inline-block w-full md:w-auto mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          </div>
          <div class="w-full md:w-auto xl:w-1/3 px-4">
            <h4 class="text-xl md:text-2xl font-extrabold mb-10">Newsletter</h4>
            <div class="inline-flex">
              <input class="p-3 w-2/3 md:w-auto bg-white border-l-2 border-t-2 border-b-2 border-indigo-900 rounded-l rounded-tl rounded-bl text-md font-extrabold text-indigo-900 placeholder-indigo-900 bg-transparent outline-none" type="email" placeholder="hello@shuffle.dev">
              <button class="flex-shrink-0 inline-block w-auto -ml-2 items-center justify-center h-full py-4 px-5 leading-6 text-md text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200">Get Started</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <div class="flex flex-wrap justify-between">
        <div class="w-full lg:w-auto mb-12 lg:mb-0">

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto">
    <div class="py-12 px-6 md:p-20 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
          <span class="text-lg font-extrabold text-orange-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">The fastest way from idea to live site. Period.</h1>
          <p class="font-extrabold leading-8">Nigodo is a Small SaaS Business. Flex isn’t a traditional company.</p>
        </div>
        <div class="w-full lg:w-2/5 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full 2xl:w-auto py-4 px-6 mb-4 2xl:mb-0 2xl:mr-4 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full 2xl:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-gray-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-gray-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">We believe in the power of data</h1>
      <p class="text-xl font-extrabold leading-8">Nigodo is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full xl:w-1/2 px-4 mb-14 xl:mb-0">
        <div class="flex flex-wrap -mx-4 -mb-8">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex flex-col items-center justify-center p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
              <div>
                <h3 class="text-3xl md:text-4xl font-extrabold mb-3">235.000</h3>
                <h4 class="text-xl font-extrabold mb-4">Projects completed</h4>
                <p class="text-gray-400 font-extrabold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex h-full items-center justify-center p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
              <div class="flex flex-col h-full">
                <h3 class="text-3xl md:text-4xl font-extrabold mb-3">$10M</h3>
                <h4 class="text-xl font-extrabold mb-4">APR</h4>

<section class="py-26 bg-purple-200">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <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-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 class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 right-0 w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-smash-dots-orange-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-orange-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-12 px-6 md:p-16 border-3 border-indigo-900 shadow bg-white rounded-2xl max-w-2xl 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-orange-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 xl:mb-0">
            <label for="">

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

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <img class="absolute top-0 right-0 w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-smash-dots-purple-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-12 px-6 md:p-16 border-3 border-indigo-900 shadow bg-white rounded-2xl max-w-2xl 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 xl:mb-0">
            <label for="">

<section class="py-26 bg-indigo-200">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <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-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 class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-26 bg-gray-200">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <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-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 class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">

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

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

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

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

<section class="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">
        <div class="flex flex-wrap -mx-4 justify-between">
          <div class="w-full md:w-auto xl:w-1/3 px-4 mb-14 xl:mb-0">
            <a class="inline-block mx-auto mb-12" href="#">
              <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
            </a>
            <div class="flex flex-wrap justify-between items-center -mb-6"><a class="inline-block w-full md:w-auto md:mr-6 mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Product</a><a class="inline-block w-full md:w-auto md:mr-6 mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Features</a><a class="inline-block w-full md:w-auto md:mr-6 mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Pricing</a><a class="inline-block w-full md:w-auto mb-6 text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          </div>
          <div class="w-full md:w-auto xl:w-1/3 px-4">
            <h4 class="text-xl md:text-2xl font-extrabold mb-10">Newsletter</h4>
            <div class="inline-flex">
              <input class="p-3 w-2/3 md:w-auto bg-white border-l-2 border-t-2 border-b-2 border-indigo-900 rounded-l rounded-tl rounded-bl text-md font-extrabold text-indigo-900 placeholder-indigo-900 bg-transparent outline-none" type="email" placeholder="hello@shuffle.dev">
              <button class="flex-shrink-0 inline-block w-auto -ml-2 items-center justify-center h-full py-4 px-5 leading-6 text-md text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200">Get Started</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <div class="flex flex-wrap justify-between">
        <div class="w-full lg:w-auto mb-12 lg:mb-0">

<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-14 px-6 md:px-14 bg-red-200 border-3 border-indigo-900 rounded-2xl shadow-md">
      <h3 class="text-2xl font-extrabold mb-4">Cookies Policy</h3>
      <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 mb-6 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>
      <a x-on:click.prevent="open=false" class="block w-full py-4 px-6 mb-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="#">Allow</a><a x-on:click.prevent="open=false" class="block w-full md:w-auto py-4 px-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>
    </div>
  </div>
</div>

<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-14 px-6 md:px-14 bg-gray-200 border-3 border-indigo-900 rounded-2xl shadow-md">
      <h3 class="text-2xl font-extrabold mb-4">Cookies Policy</h3>
      <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 mb-6 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>
      <a x-on:click.prevent="open=false" class="block w-full py-4 px-6 mb-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="#">Allow</a><a x-on:click.prevent="open=false" class="block w-full md:w-auto py-4 px-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>
    </div>
  </div>
</div>

<section class="py-26 bg-purple-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-purple-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-6">Let’s stay connected</h1>
      <p class="text-xl font-extrabold leading-7">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="h-full p-10 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex items-center justify-center w-18 h-18 mb-4 rounded-full bg-purple-200">
            <span class="text-3xl font-extrabold">1</span>
          </div>
          <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
          <p class="font-bold leading-6">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="h-full p-10 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex items-center justify-center w-18 h-18 mb-4 rounded-full bg-green-200">
            <span class="text-3xl font-extrabold">2</span>
          </div>
          <h3 class="text-2xl font-extrabold mb-4">Custom analytics</h3>
          <p class="font-bold leading-6">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>

<section class="py-26 bg-red-200">
  <div class="container px-4 mx-auto">
    <div class="py-12 px-6 md:p-20 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
          <span class="text-lg font-extrabold text-red-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">The fastest way from idea to live site. Period.</h1>
          <p class="font-extrabold leading-8">Nigodo is a Small SaaS Business. Flex isn’t a traditional company.</p>
        </div>
        <div class="w-full lg:w-2/5 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full 2xl:w-auto py-4 px-6 mb-4 2xl:mb-0 2xl:mr-4 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full 2xl:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

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