Tailwind CSS Components

<section class="py-26 bg-orange-200" x-data="{ start: 3, max: 9, current: 3, pagination: 1 }" x-init="pagination = $refs.pagination1.textContent">
  <div class="container px-4 mx-auto">
    <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-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</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="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-orange-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>

<section class="py-26 bg-pink-200">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-lg font-extrabold text-pink-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Our team is the best in the business.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap mb-16 justify-center"><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 class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow text-center">
          <img class="max-w-max mx-auto block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-6 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <div class="mt-auto">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-indigo-200"></div>
  <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-14 lg:mb-0">
        <div class="max-w-md xl: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-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Password</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
            </div>
            <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
              <div class="w-full lg:w-auto px-4 mb-4 xl:mb-0">

<section class="py-26 bg-purple-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-purple-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 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-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="inline-flex mb-8 w-20 h-20 items-center justify-center bg-white text-indigo-900 border-3 border-indigo-900 rounded-full shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.9467 11.76L18.6667 3.7067C17.9653 3.03984 17.0345 2.66797 16.0667 2.66797C15.0989 2.66797 14.1681 3.03984 13.4667 3.7067L5.18667 11.7067C4.81877 12.0279 4.52289 12.4231 4.31839 12.8666C4.11389 13.31 4.00539 13.7917 4 14.28V25.72C4.01405 26.6902 4.41206 27.6152 5.10682 28.2925C5.80159 28.9698 6.73647 29.3441 7.70667 29.3334H24.2933C25.2635 29.3441 26.1984 28.9698 26.8932 28.2925C27.5879 27.6152 27.9859 26.6902 28 25.72V14.28C27.999 13.8113 27.9054 13.3474 27.7246 12.915C27.5439 12.4826 27.2795 12.0901 26.9467 11.76ZM15.2533 5.6267C15.4573 5.44025 15.7237 5.33686 16 5.33686C16.2763 5.33686 16.5427 5.44025 16.7467 5.6267L24 12.6667L16.7067 19.7067C16.5027 19.8932 16.2363 19.9965 15.96 19.9965C15.6837 19.9965 15.4173 19.8932 15.2133 19.7067L8 12.6667L15.2533 5.6267ZM25.3333 25.72C25.3162 25.9817 25.1982 26.2266 25.0043 26.4031C24.8103 26.5797 24.5555 26.6742 24.2933 26.6667H7.70667C7.44451 26.6742 7.18966 26.5797 6.99571 26.4031C6.80176 26.2266 6.68382 25.9817 6.66667 25.72V15.1334L12.0667 20.3334L9.85333 22.4667C9.605 22.7165 9.46561 23.0545 9.46561 23.4067C9.46561 23.7589 9.605 24.0969 9.85333 24.3467C9.97726 24.4767 10.1262 24.5803 10.2911 24.6514C10.4561 24.7224 10.6337 24.7593 10.8133 24.76C11.1566 24.7587 11.4862 24.6249 11.7333 24.3867L14.0933 22.12C14.6795 22.4782 15.3531 22.6677 16.04 22.6677C16.7269 22.6677 17.4005 22.4782 17.9867 22.12L20.3467 24.3867C20.5938 24.6249 20.9234 24.7587 21.2667 24.76C21.4463 24.7593 21.6239 24.7224 21.7889 24.6514C21.9538 24.5803 22.1027 24.4767 22.2267 24.3467C22.475 24.0969 22.6144 23.7589 22.6144 23.4067C22.6144 23.0545 22.475 22.7165 22.2267 22.4667L20 20.3334L25.3333 15.1334V25.72Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-extrabold mb-3">Email</h3>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-orange-200"></div>
  <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-14 lg:mb-0">
        <div class="max-w-md xl: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-orange-500">Start your demo version</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Password</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
            </div>
            <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
              <div class="w-full lg:w-auto px-4 mb-4 xl:mb-0">

<section class="py-26 bg-purple-200" x-data="{ start: 3, max: 9, current: 3, pagination: 1 }" x-init="pagination = $refs.pagination1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-purple-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</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="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-purple-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <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">Our team is the best in the business.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap mb-16 justify-center"><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 class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow text-center">
          <img class="max-w-max mx-auto block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-6 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <div class="mt-auto">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">

<section class="py-26 bg-orange-200" x-data="{ start: 3, max: 9, current: 3, pagination: 1 }" x-init="pagination = $refs.pagination1.textContent">
  <div class="container px-4 mx-auto">
    <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-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</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="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-green-200"></div>
  <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-14 lg:mb-0">
        <div class="max-w-md xl: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-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Password</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
            </div>
            <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
              <div class="w-full lg:w-auto px-4 mb-4 xl:mb-0">

<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">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <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">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 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-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="inline-flex mb-8 w-20 h-20 items-center justify-center bg-white text-indigo-900 border-3 border-indigo-900 rounded-full shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.9467 11.76L18.6667 3.7067C17.9653 3.03984 17.0345 2.66797 16.0667 2.66797C15.0989 2.66797 14.1681 3.03984 13.4667 3.7067L5.18667 11.7067C4.81877 12.0279 4.52289 12.4231 4.31839 12.8666C4.11389 13.31 4.00539 13.7917 4 14.28V25.72C4.01405 26.6902 4.41206 27.6152 5.10682 28.2925C5.80159 28.9698 6.73647 29.3441 7.70667 29.3334H24.2933C25.2635 29.3441 26.1984 28.9698 26.8932 28.2925C27.5879 27.6152 27.9859 26.6902 28 25.72V14.28C27.999 13.8113 27.9054 13.3474 27.7246 12.915C27.5439 12.4826 27.2795 12.0901 26.9467 11.76ZM15.2533 5.6267C15.4573 5.44025 15.7237 5.33686 16 5.33686C16.2763 5.33686 16.5427 5.44025 16.7467 5.6267L24 12.6667L16.7067 19.7067C16.5027 19.8932 16.2363 19.9965 15.96 19.9965C15.6837 19.9965 15.4173 19.8932 15.2133 19.7067L8 12.6667L15.2533 5.6267ZM25.3333 25.72C25.3162 25.9817 25.1982 26.2266 25.0043 26.4031C24.8103 26.5797 24.5555 26.6742 24.2933 26.6667H7.70667C7.44451 26.6742 7.18966 26.5797 6.99571 26.4031C6.80176 26.2266 6.68382 25.9817 6.66667 25.72V15.1334L12.0667 20.3334L9.85333 22.4667C9.605 22.7165 9.46561 23.0545 9.46561 23.4067C9.46561 23.7589 9.605 24.0969 9.85333 24.3467C9.97726 24.4767 10.1262 24.5803 10.2911 24.6514C10.4561 24.7224 10.6337 24.7593 10.8133 24.76C11.1566 24.7587 11.4862 24.6249 11.7333 24.3867L14.0933 22.12C14.6795 22.4782 15.3531 22.6677 16.04 22.6677C16.7269 22.6677 17.4005 22.4782 17.9867 22.12L20.3467 24.3867C20.5938 24.6249 20.9234 24.7587 21.2667 24.76C21.4463 24.7593 21.6239 24.7224 21.7889 24.6514C21.9538 24.5803 22.1027 24.4767 22.2267 24.3467C22.475 24.0969 22.6144 23.7589 22.6144 23.4067C22.6144 23.0545 22.475 22.7165 22.2267 22.4667L20 20.3334L25.3333 15.1334V25.72Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-extrabold mb-3">Email</h3>

<section class="py-26 bg-red-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="text-lg font-extrabold text-red-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="px-6 pt-12 lg:px-12 pb-10 border-b-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">Small</h2>
            <div class="flex items-start mb-6">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-4xl sm:text-5xl font-extrabold">10</span>
              <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
            </div>
            <p class="text-lg font-extrabold leading-7 mb-8">Basic features for up to 10 users.</p>
            <a class="inline-block w-full py-4 px-6 mb-4 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a><a class="inline-block w-full 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 class="p-6 lg:px-12 pt-10 pb-12">
            <div class="flex mb-4 items-start">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-red.svg" alt="">
              <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="text-lg font-extrabold text-gray-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="px-6 pt-12 lg:px-12 pb-10 border-b-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">Small</h2>
            <div class="flex items-start mb-6">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-4xl sm:text-5xl font-extrabold">10</span>
              <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
            </div>
            <p class="text-lg font-extrabold leading-7 mb-8">Basic features for up to 10 users.</p>
            <a class="inline-block w-full py-4 px-6 mb-4 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a><a class="inline-block w-full 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 class="p-6 lg:px-12 pt-10 pb-12">
            <div class="flex mb-4 items-start">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-gray.svg" alt="">
              <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-pink-200"></div>
  <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-14 lg:mb-0">
        <div class="max-w-md xl: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-pink-500">Start your demo version</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Password</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
            </div>
            <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
              <div class="w-full lg:w-auto px-4 mb-4 xl:mb-0">

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

<section class="py-26 bg-gray-200">
  <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-gray-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-gray-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-indigo-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 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-orange-200">
  <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-orange-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-orange-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-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 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-red-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 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>