Tailwind CSS Components

<section class="pt-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto 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 mb-4">Great work starts with your app</h1>
      <p class="text-xl font-extrabold leading-7 mb-10">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="flex flex-wrap items-center justify-center">
        <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>
    <img class="block mx-auto" src="nigodo-assets/apps/three-phones-bottom.svg" alt="">
  </div>
</section>

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-14">
      <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-6">Flexible pricing plan for your startup</h1>
      <div class="flex items-center justify-center">
        <span class="sm:text-xl font-extrabold">Billed Monthly</span>
        <div class="inline-flex w-16 h-10 mx-4 px-px items-center bg-white border-3 border-indigo-900 rounded-full shadow" x-data="{ toggle: false }">
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': !toggle, 'focus:outline-none': toggle }"></button>
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': toggle, 'focus:outline-none': !toggle }"></button>
        </div>
        <span class="sm:text-xl font-extrabold">Billed Annually</span>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="flex flex-col h-full bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex flex-wrap justify-between items-center px-6 lg:px-12 py-12 border-b-3 border-indigo-900">
            <div class="mb-4 w-full sm:w-1/2 sm:mb-0">
              <h2 class="text-2xl font-extrabold">Basic plan</h2>
              <p class="text-lg font-extrabold leading-7">For bigger teams</p>
            </div>
            <div class="flex w-full sm:w-auto items-start">
              <span class="pr-1 text-lg font-extrabold">$</span>

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="max-w-lg mb-12">
          <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-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">
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Projects completed</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">APR</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Hours saved annually</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">3.500</h3>

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 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-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8">
        <div class="h-full flex flex-col border-3 border-indigo-900 rounded-2xl shadow overflow-hidden">
          <div class="mb-auto h-full">
            <img class="block h-96 lg:h-full w-full object-cover" src="nigodo-assets/team/photo-5.jpg" alt="">
          </div>
          <div class="px-6 py-4 bg-indigo-900">
            <h2 class="text-xl text-white font-extrabold">Macauley Herring</h2>
            <span class="text-lg font-bold text-indigo-300">CEO &amp; Founder</span>
          </div>
        </div>
      </div>

<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-two-smashes-orange-right.svg" alt="">
  <img class="absolute top-0 left-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-orange-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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">Join our community</h2>
        <p class="text-lg font-extrabold leading-7 text-orange-500">Start your journey with our product</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Name</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="text" placeholder="David">
        </div>
        <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="**********">

<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-two-smashes-pink-right.svg" alt="">
  <img class="absolute top-0 left-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-pink-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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">Join our community</h2>
        <p class="text-lg font-extrabold leading-7 text-pink-500">Start your journey with our product</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Name</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="text" placeholder="David">
        </div>
        <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="**********">

<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-20 lg:mb-0">
        <div class="max-w-lg mb-12">
          <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">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">
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Projects completed</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">APR</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Hours saved annually</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">3.500</h3>

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 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 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 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 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-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 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-b-0 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-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-20 lg:mb-0">
        <h1 class="max-w-lg xl:max-w-none text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-6">Join 6,000+ startups growing with Flex</h1>
        <div class="mb-8">
          <div class="flex mb-4 items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>
          </div>
          <div class="flex items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
            <span class="text-lg font-extrabold">Praesent varius justo vel justo pulvinar</span>
          </div>
        </div>
        <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-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 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="#">Learn More</a></div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto w-full h-156 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
      </div>

<section class="pt-26 lg:py-40 xl:py-52 min-h-screen bg-gray-200 relative">
  <img class="hidden lg:block absolute top-0 left-0 h-full w-2/5 border-r-3 border-b-3 border-indigo-900 shadow-lg object-cover" src="nigodo-assets/img/board-office.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex mb-14 lg:mb-0">
      <div class="w-full lg:w-1/2 ml-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"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md: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="#">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>
    <img class="lg:hidden border-3 border-indigo-900" src="nigodo-assets/img/board-office.jpg" alt="">
  </div>
</section>

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-gray-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8">
        <div class="h-full flex flex-col border-3 border-indigo-900 rounded-2xl shadow overflow-hidden">
          <div class="mb-auto h-full">
            <img class="block h-96 lg:h-full w-full object-cover" src="nigodo-assets/team/photo-5.jpg" alt="">
          </div>
          <div class="px-6 py-4 bg-indigo-900">
            <h2 class="text-xl text-white font-extrabold">Macauley Herring</h2>
            <span class="text-lg font-bold text-indigo-300">CEO &amp; Founder</span>
          </div>
        </div>
      </div>

<section class="py-26 bg-red-200" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center bg-white border-3 border-red-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-red-300">
          <svg width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-red-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-red-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Unlocking Freedom: The Ultimate Answer to Flexibility and Financial Stability.</h1>

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-indigo-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8">
        <div class="h-full flex flex-col border-3 border-indigo-900 rounded-2xl shadow overflow-hidden">
          <div class="mb-auto h-full">
            <img class="block h-96 lg:h-full w-full object-cover" src="nigodo-assets/team/photo-5.jpg" alt="">
          </div>
          <div class="px-6 py-4 bg-indigo-900">
            <h2 class="text-xl text-white font-extrabold">Macauley Herring</h2>
            <span class="text-lg font-bold text-indigo-300">CEO &amp; Founder</span>
          </div>
        </div>
      </div>

<section class="py-26 bg-orange-200" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center bg-white border-3 border-indigo-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-orange-300">
          <svg width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-orange-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-orange-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Unlocking Freedom: The Ultimate Answer to Flexibility and Financial Stability.</h1>

<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-20 lg:mb-0">
        <div class="max-w-lg mb-12">
          <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">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">
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Projects completed</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">APR</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Hours saved annually</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">3.500</h3>

<section class="py-26 bg-pink-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-14">
      <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">Flexible pricing plan for your startup</h1>
      <div class="flex items-center justify-center">
        <span class="sm:text-xl font-extrabold">Billed Monthly</span>
        <div class="inline-flex w-16 h-10 mx-4 px-px items-center bg-white border-3 border-indigo-900 rounded-full shadow" x-data="{ toggle: false }">
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': !toggle, 'focus:outline-none': toggle }"></button>
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': toggle, 'focus:outline-none': !toggle }"></button>
        </div>
        <span class="sm:text-xl font-extrabold">Billed Annually</span>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="flex flex-col h-full bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex flex-wrap justify-between items-center px-6 lg:px-12 py-12 border-b-3 border-indigo-900">
            <div class="mb-4 w-full sm:w-1/2 sm:mb-0">
              <h2 class="text-2xl font-extrabold">Basic plan</h2>
              <p class="text-lg font-extrabold leading-7">For bigger teams</p>
            </div>
            <div class="flex w-full sm:w-auto items-start">
              <span class="pr-1 text-lg font-extrabold">$</span>

<section class="py-26 bg-purple-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-14">
      <span class="text-lg font-extrabold text-purple-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <div class="flex items-center justify-center">
        <span class="sm:text-xl font-extrabold">Billed Monthly</span>
        <div class="inline-flex w-16 h-10 mx-4 px-px items-center bg-white border-3 border-indigo-900 rounded-full shadow" x-data="{ toggle: false }">
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': !toggle, 'focus:outline-none': toggle }"></button>
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': toggle, 'focus:outline-none': !toggle }"></button>
        </div>
        <span class="sm:text-xl font-extrabold">Billed Annually</span>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="flex flex-col h-full bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex flex-wrap justify-between items-center px-6 lg:px-12 py-12 border-b-3 border-indigo-900">
            <div class="mb-4 w-full sm:w-1/2 sm:mb-0">
              <h2 class="text-2xl font-extrabold">Basic plan</h2>
              <p class="text-lg font-extrabold leading-7">For bigger teams</p>
            </div>
            <div class="flex w-full sm:w-auto items-start">
              <span class="pr-1 text-lg font-extrabold">$</span>

<section class="py-26 bg-purple-200" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center bg-white border-3 border-purple-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-purple-300">
          <svg width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-purple-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-purple-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Unlocking Freedom: The Ultimate Answer to Flexibility and Financial Stability.</h1>

<section class="py-26 bg-indigo-200" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center bg-white border-3 border-indigo-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-indigo-300">
          <svg width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-indigo-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-indigo-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Unlocking Freedom: The Ultimate Answer to Flexibility and Financial Stability.</h1>

<section class="pt-26 lg:py-40 xl:py-52 min-h-screen bg-pink-200 relative">
  <img class="hidden lg:block absolute top-0 left-0 h-full w-2/5 border-r-3 border-b-3 border-indigo-900 shadow-lg object-cover" src="nigodo-assets/img/board-office.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex mb-14 lg:mb-0">
      <div class="w-full lg:w-1/2 ml-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"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md: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="#">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>
    <img class="lg:hidden border-3 border-indigo-900" src="nigodo-assets/img/board-office.jpg" alt="">
  </div>
</section>