Tailwind CSS Components

<section class="py-26 md:py-32 min-h-screen md:min-h-0 bg-white">
  <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-white" 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-purple-900 rounded-2xl shadow-md text-center">
      <div class="mb-12">
        <span class="inline-block mb-3 text-lg font-extrabold text-purple-500">Quotes</span>
        <div class="flex flex-wrap sm:flex-nowrap -mx-4">
          <div class="hidden sm:block self-start px-4 text-purple-300 opacity-10">
            <svg class="h-10 sm:h-auto" 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-purple-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="py-26 bg-white">
  <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>
  <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>

<section class="py-26 bg-white">
  <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-indigo-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-indigo-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-white">
  <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-purple-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-purple-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 md:py-32 min-h-screen md:min-h-0 bg-white">
  <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 lg:min-h-screen bg-white relative">
  <img class="hidden lg:block absolute top-0 right-0 w-2/5 2xl:w-1/2 h-full object-cover border-l-3 border-b-3 border-indigo-900" src="nigodo-assets/img/board-office.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2">
      <div class="max-w-lg mx-auto">
        <div class="text-center mb-8">
          <a class="inline-block mx-auto mb-6" href="#">
            <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
          </a>
          <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Sign in</h2>
          <p class="text-lg font-extrabold leading-7 text-indigo-500">Start your demo version</p>
        </div>
        <form action="">
          <div class="mb-8">
            <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">
  <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-red-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-red-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 md:py-32 min-h-screen md:min-h-0 bg-white">
  <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-white">
  <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-red-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-white">
  <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>
  <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>

<section class="py-26 bg-white">
  <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-white">
  <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-white">
  <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-green-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-green-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-white">
  <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-green-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-white">
  <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-green-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 lg:min-h-screen bg-white relative">
  <img class="hidden lg:block absolute top-0 right-0 w-2/5 2xl:w-1/2 h-full object-cover border-l-3 border-b-3 border-indigo-900" src="nigodo-assets/img/board-office.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2">
      <div class="max-w-lg mx-auto">
        <div class="text-center mb-8">
          <a class="inline-block mx-auto mb-6" href="#">
            <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
          </a>
          <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Sign in</h2>
          <p class="text-lg font-extrabold leading-7 text-green-500">Start your demo version</p>
        </div>
        <form action="">
          <div class="mb-8">
            <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">
  <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-green-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">The fastest way from idea to live site. Period.</h1>
        <p class="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>