Tailwind CSS Components

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-purple-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-rotate-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <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-indigo-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="**********">
        </div>
        <button class="inline-block w-full py-4 px-6 mb-6 text-center text-lg leading-6 text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200">Sign Up</button>

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

<section class="py-26 bg-red-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-red-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-red-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap 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="">

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

<section class="pt-26 lg:py-40 xl:py-52 min-h-screen bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 right-0" src="nigodo-assets/background-elements/pattern-smash-rotate-orange-right.svg" alt="">
  <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 relative">
    <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-orange-200 relative overflow-hidden">
  <img class="absolute top-0 right-0 w-1/2 md:w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-big-orange-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-big-orange-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <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-green.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-green.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-green.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">

<section class="pt-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-orange-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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-purple-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap 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="">

<section class="pt-26 bg-gray-200 relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-gray-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-gray-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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="pt-26 bg-red-200 relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-red-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-red-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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="pt-26 lg:py-40 xl:py-52 min-h-screen bg-purple-200 relative overflow-hidden">
  <img class="absolute top-0 right-0" src="nigodo-assets/background-elements/pattern-smash-rotate-purple-right.svg" alt="">
  <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 relative">
    <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-green-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-green-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-green-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap 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="">

<section class="py-26 bg-indigo-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-indigo-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-rotate-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-14">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">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>

<section class="pt-26 bg-pink-200 relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-pink-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <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 lg:min-h-screen bg-white relative">
  <img class="hidden lg:block absolute top-0 right-0 h-full w-2/5 2xl:w-1/2 object-cover border-l-3 border-indigo-900 shadow-lg" 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">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-8">
            <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-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="**********">

<section class="py-26 lg:min-h-screen bg-white relative">
  <img class="hidden lg:block absolute top-0 right-0 h-full w-2/5 2xl:w-1/2 object-cover border-l-3 border-indigo-900 shadow-lg" 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">Join our community</h2>
          <p class="text-lg font-extrabold leading-7 text-purple-500">Start your journey with our product</p>
        </div>
        <form action="">
          <div class="mb-8">
            <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-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="**********">

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-orange-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="p-8 md:p-16 bg-white border-3 border-indigo-900 rounded-2xl shadow">
      <div class="max-w-3xl mx-auto text-center">
        <span class="text-lg font-extrabold text-orange-500">Newsletter</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
        <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="max-w-lg mx-auto">
        <div class="flex flex-wrap -mx-2 justify-center">
          <div class="flex-grow w-full md:w-auto px-2 mb-2">
            <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
          </div>
          <div class="w-full md:w-auto px-2 mb-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
          <div class="w-full px-2">
            <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 lg:min-h-screen bg-white relative">
  <img class="hidden lg:block absolute top-0 right-0 h-full w-2/5 2xl:w-1/2 object-cover border-l-3 border-indigo-900 shadow-lg" 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">Join our community</h2>
          <p class="text-lg font-extrabold leading-7 text-green-500">Start your journey with our product</p>
        </div>
        <form action="">
          <div class="mb-8">
            <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-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="**********">

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