Tailwind CSS Components

<section class="relative bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <img class="md:hidden w-full" src="flex-ui-assets/images/http-codes/dog-error-side.png" alt="">
  <img class="absolute top-0 left-0 hidden md:block h-full w-2/5 md:object-cover" src="flex-ui-assets/images/http-codes/dog-error-side.png" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap py-16 md:py-40 lg:py-72">
      <div class="w-full md:w-1/2 ml-auto text-center md:text-left">
        <div class="md:max-w-xl">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Error 404</span>
          <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Oh no! Error 404</h2>
          <p class="mb-6 text-lg md:text-xl text-coolGray-400">Something went wrong, so this page is broken.</p>
          <div class="flex flex-wrap">
            <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Go back to Homepage</a></div>
            <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 font-medium text-center bg-coolGray-600 hover:bg-coolGray-700 focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="absolute right-6 top-6 hidden md:block w-24 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
  <img class="absolute right-0 bottom-0 w-24 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
</section>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
      <div class="p-6 pb-0">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-auto p-2">
            <h2 class="text-coolGray-900 text-lg font-semibold">Visitors Overview</h2>
            <p class="font-medium text-xs text-coolGray-500">Number of unique visitors</p>
          </div>
          <div class="w-auto p-2">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 6.66667C7.73629 6.66667 7.47851 6.74487 7.25924 6.89138C7.03998 7.03788 6.86908 7.24612 6.76816 7.48976C6.66724 7.73339 6.64084 8.00148 6.69229 8.26012C6.74373 8.51876 6.87072 8.75634 7.05719 8.94281C7.24366 9.12928 7.48124 9.25627 7.73988 9.30772C7.99852 9.35916 8.26661 9.33276 8.51025 9.23184C8.75388 9.13092 8.96212 8.96003 9.10863 8.74076C9.25514 8.5215 9.33333 8.26371 9.33333 8C9.33333 7.64638 9.19286 7.30724 8.94281 7.05719C8.69276 6.80714 8.35362 6.66667 8 6.66667ZM3.33333 6.66667C3.06963 6.66667 2.81184 6.74487 2.59257 6.89138C2.37331 7.03788 2.20241 7.24612 2.10149 7.48976C2.00058 7.73339 1.97417 8.00148 2.02562 8.26012C2.07707 8.51876 2.20405 8.75634 2.39052 8.94281C2.57699 9.12928 2.81457 9.25627 3.07321 9.30772C3.33185 9.35916 3.59994 9.33276 3.84358 9.23184C4.08721 9.13092 4.29545 8.96003 4.44196 8.74076C4.58847 8.5215 4.66667 8.26371 4.66667 8C4.66667 7.64638 4.52619 7.30724 4.27614 7.05719C4.02609 6.80714 3.68696 6.66667 3.33333 6.66667ZM12.6667 6.66667C12.403 6.66667 12.1452 6.74487 11.9259 6.89138C11.7066 7.03788 11.5357 7.24612 11.4348 7.48976C11.3339 7.73339 11.3075 8.00148 11.359 8.26012C11.4104 8.51876 11.5374 8.75634 11.7239 8.94281C11.9103 9.12928 12.1479 9.25627 12.4065 9.30772C12.6652 9.35916 12.9333 9.33276 13.1769 9.23184C13.4205 9.13092 13.6288 8.96003 13.7753 8.74076C13.9218 8.5215 14 8.26371 14 8C14 7.64638 13.8595 7.30724 13.6095 7.05719C13.3594 6.80714 13.0203 6.66667 12.6667 6.66667Z" fill="#D5DAE1"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="relative top-8">
        <div class="chart-graph1-area"></div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4 mb-16">
      <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-md">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
          <h3 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Meet our team</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
        </div>
      </div>
      <div class="w-full md:w-auto px-4">
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">We are hiring</a></div>
          <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">Our Culture</a></div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="relative max-w-max">
          <img class="w-full" src="flex-ui-assets/images/teams/photo-men.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-6 md:pl-10 md:pb-10">
            <h3 class="mb-2 text-2xl md:text-3xl leading-tight text-white font-semibold">Macauley Herring</h3>
            <span class="text-lg font-medium text-green-500 leading-7">CEO &amp; Founder</span>

<section class="pt-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-16">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap pb-16 -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl font-bold text-coolGray-900">What shipping options do you have?</h3>
          <p class="font-medium text-coolGray-500">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl font-bold text-coolGray-900">What payment methods do you accept?</h3>
          <p class="font-medium text-coolGray-500">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4 mb-16">
      <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-md">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
          <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Meet our team</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Highly professional and capable of running your business across all digital channels.</p>
        </div>
      </div>
      <div class="w-full md:w-auto px-4">
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">We are hiring</a></div>
          <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 bg-coolGray-700 hover:bg-coolGray-800 font-medium text-center focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Our Culture</a></div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="relative max-w-max">
          <img class="w-full" src="flex-ui-assets/images/teams/photo-men.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-6 md:pl-10 md:pb-10">
            <h3 class="mb-2 text-2xl md:text-3xl leading-tight text-white font-semibold">Macauley Herring</h3>
            <span class="text-lg font-medium text-green-500 leading-7">CEO &amp; Founder</span>

<section class="py-24 md:py-32 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-sm mx-auto">
      <div class="mb-6 text-center">
        <a class="inline-block mb-6" href="#">
          <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
        </a>
        <h3 class="mb-4 text-2xl md:text-3xl text-white font-bold">Join our community</h3>
        <p class="text-lg text-coolGray-400 text-white font-medium">Start your journey with our product</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 text-white font-medium" for="">Name*</label>
          <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="Patryk">
        </div>
        <div class="mb-6">
          <label class="block mb-2 text-white font-medium" for="">Email*</label>
          <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="dev@shuffle.dev">
        </div>
        <div class="mb-4">
          <label class="block mb-2 text-white font-medium" for="">Password*</label>
          <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
        </div>
        <div class="flex flex-wrap items-center justify-between mb-6">

<section class="py-24 bg-white">
  <div class="container px-4 mx-auto">
    <div class="relative py-16 md:py-32 px-6 text-center bg-coolGray-50 overflow-hidden rounded-7xl" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
      <div class="relative z-10 mx-auto md:max-w-2xl">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Be the first to know when we launch</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <div class="flex flex-wrap mb-1">
            <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
              <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
            </div>
            <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
          </div>
          <span class="text-xs text-coolGray-500 font-medium">
            <span>We care about your data in our</span>
            <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
          </span>
        </div>
      </div>
      <img class="absolute top-0 left-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave2-yellow.svg" alt="">
      <img class="absolute right-6 top-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
      <img class="absolute right-0 bottom-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
      <img class="absolute left-6 bottom-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
    </div>

<section class="pt-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
      <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Get our Free Mobile App</h3>
      <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-400 font-medium max-w-2xl">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 justify-center mb-16">
        <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-4">
          <img class="mx-auto" src="flex-ui-assets/elements/app-store-gray.svg" alt="">
        </div>
        <div class="w-full md:w-auto">
          <img class="mx-auto" src="flex-ui-assets/elements/google-play-gray.svg" alt="">
        </div>
      </div>
      <div class="flex flex-row items-end mx-auto max-w-max">
        <div class="relative">
          <img class="mx-auto h-64 md:h-auto object-cover" src="flex-ui-assets/elements/applications/iphone-dark-half1.png" alt="">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-56 md:h-auto mt-2 md:mt-3 object-cover" src="flex-ui-assets/elements/applications/iphone-half-ui1.png" alt="">
        </div>
        <div class="relative z-10 hidden md:block md:-ml-24">
          <img class="mx-auto" src="flex-ui-assets/elements/applications/iphone-dark-half2.png" alt="">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-4" src="flex-ui-assets/elements/applications/iphone-half-ui2.png" alt="">
        </div>
        <div class="relative hidden md:block md:-ml-24">

<section class="pt-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-16">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap pb-16 -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl font-bold text-coolGray-900">What shipping options do you have?</h3>
          <p class="font-medium text-coolGray-500">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl font-bold text-coolGray-900">What payment methods do you accept?</h3>
          <p class="font-medium text-coolGray-500">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

<section x-data="{ current: 0 }" class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
        <div x-show="current === 0">
            <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
              <img class="absolute top-0 left-0" src="flex-ui-assets/elements/testimonials/quote-top-dark.svg" alt="">
              <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-dark.svg" alt="">
              <div class="relative">
                <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
                <h2 class="text-2xl md:text-5xl text-white font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
              </div>
            </div>
            <div class="text-center mb-8">
              <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/testimonials/avatar1.png" alt="">
              <h3 class="mb-2 text-xl md:text-2xl text-white font-semibold">Darren Dunlap</h3>
              <span class="text-lg text-coolGray-600 font-medium">CEO &amp; Founder at Flex.co</span>
            </div>
        </div>
        <div x-show="current === 1">

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="mb-8 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Our Clients</span>
        <h3 class="mb-4 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
      </div>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
            <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
          </div>
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
            <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
          </div>
        </div>

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <section class="py-20 xl:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Numbers</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">We believe in the power of data</h3>
      <p class="mb-16 xl:mb-24 text-lg md:text-xl text-coolGray-500 font-medium max-w-3xl">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      <div class="flex flex-wrap items-center -mx-4 text-center">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="flex flex-wrap justify-center -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">235.000</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-bold">Projects completed</h3>
              <p class="text-coolGray-500 font-medium">No need to hire specialists for each channel.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">$10m</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-bold">APR</h3>
              <p class="text-coolGray-500 font-medium">Track how much money a company just in case</p>
            </div>

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
        <div class="w-full md:w-2/3 px-4">
          <a class="block mb-12 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
          <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Product</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Resources</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Careers</a></div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4">
          <h3 class="mb-6 text-lg font-bold text-coolGray-900">Newsletter</h3>
          <div class="flex flex-wrap">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-yellow-100 border border-yellow-200 rounded-md">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 10.6667C7.86814 10.6667 7.73925 10.7058 7.62962 10.779C7.51999 10.8523 7.43454 10.9564 7.38408 11.0782C7.33362 11.2 7.32042 11.3341 7.34614 11.4634C7.37187 11.5927 7.43536 11.7115 7.52859 11.8047C7.62183 11.898 7.74062 11.9615 7.86994 11.9872C7.99926 12.0129 8.1333 11.9997 8.25512 11.9493C8.37694 11.8988 8.48106 11.8133 8.55431 11.7037C8.62757 11.5941 8.66667 11.4652 8.66667 11.3333C8.66667 11.1565 8.59643 10.987 8.4714 10.8619C8.34638 10.7369 8.17681 10.6667 8 10.6667ZM15.1133 11.6467L9.74667 2.31334C9.5732 2.00235 9.31986 1.74331 9.01279 1.56298C8.70573 1.38266 8.35609 1.28758 8 1.28758C7.6439 1.28758 7.29426 1.38266 6.9872 1.56298C6.68014 1.74331 6.42679 2.00235 6.25333 2.31334L0.919999 11.6467C0.740529 11.9493 0.644094 12.294 0.640428 12.6459C0.636763 12.9977 0.725997 13.3444 0.899123 13.6507C1.07225 13.9571 1.32314 14.2123 1.62645 14.3907C1.92977 14.5691 2.27479 14.6643 2.62667 14.6667H13.3733C13.728 14.6702 14.0773 14.5793 14.3853 14.4033C14.6933 14.2273 14.9489 13.9726 15.126 13.6652C15.3031 13.3579 15.3952 13.0089 15.393 12.6542C15.3908 12.2995 15.2943 11.9518 15.1133 11.6467ZM13.96 12.98C13.9016 13.084 13.8163 13.1704 13.7131 13.2302C13.6099 13.29 13.4926 13.321 13.3733 13.32H2.62667C2.50741 13.321 2.39006 13.29 2.28688 13.2302C2.18369 13.1704 2.09843 13.084 2.04 12.98C1.98149 12.8787 1.95068 12.7637 1.95068 12.6467C1.95068 12.5296 1.98149 12.4147 2.04 12.3133L7.37333 2.98C7.42928 2.8708 7.51427 2.77916 7.61896 2.71516C7.72365 2.65117 7.84397 2.61731 7.96667 2.61731C8.08936 2.61731 8.20968 2.65117 8.31437 2.71516C8.41906 2.77916 8.50405 2.8708 8.56 2.98L13.9267 12.3133C13.9928 12.4132 14.0308 12.5291 14.0367 12.6488C14.0425 12.7684 14.0161 12.8875 13.96 12.9933V12.98ZM8 5.33334C7.82319 5.33334 7.65362 5.40357 7.52859 5.5286C7.40357 5.65362 7.33333 5.82319 7.33333 6V8.66667C7.33333 8.84348 7.40357 9.01305 7.52859 9.13807C7.65362 9.2631 7.82319 9.33334 8 9.33334C8.17681 9.33334 8.34638 9.2631 8.4714 9.13807C8.59643 9.01305 8.66667 8.84348 8.66667 8.66667V6C8.66667 5.82319 8.59643 5.65362 8.4714 5.5286C8.34638 5.40357 8.17681 5.33334 8 5.33334Z" fill="#F59E0B"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="font-medium text-sm text-yellow-900">Attention alert example</h3>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.94001 8L13.14 3.80667C13.2655 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2655 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4891 2.66394 12.3189 2.73447 12.1933 2.86L8.00001 7.06L3.80668 2.86C3.68114 2.73447 3.51088 2.66394 3.33334 2.66394C3.15581 2.66394 2.98555 2.73447 2.86001 2.86C2.73447 2.98554 2.66395 3.1558 2.66395 3.33333C2.66395 3.51087 2.73447 3.68113 2.86001 3.80667L7.06001 8L2.86001 12.1933C2.79752 12.2553 2.74793 12.329 2.71408 12.4103C2.68024 12.4915 2.66281 12.5787 2.66281 12.6667C2.66281 12.7547 2.68024 12.8418 2.71408 12.9231C2.74793 13.0043 2.79752 13.078 2.86001 13.14C2.92199 13.2025 2.99572 13.2521 3.07696 13.2859C3.1582 13.3198 3.24534 13.3372 3.33334 13.3372C3.42135 13.3372 3.50849 13.3198 3.58973 13.2859C3.67097 13.2521 3.7447 13.2025 3.80668 13.14L8.00001 8.94L12.1933 13.14C12.2553 13.2025 12.3291 13.2521 12.4103 13.2859C12.4915 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8418 13.3198 12.9231 13.2859C13.0043 13.2521 13.078 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.2859 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.2859 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94001 8Z" fill="#784D05"></path>
            </svg>
          </a>
        </div>
      </div>

<section class="py-20 xl:pt-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="mb-8 text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Our Clients</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="mb-8 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Our Clients</span>
        <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
      </div>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
            <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-dark.svg" alt="">
          </div>
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
            <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-dark.svg" alt="">
          </div>
        </div>

<section class="relative pt-24 md:pt-32 md:pt-40 pb-40 md:pb-72 wave-top wave-bottom overflow-hidden">
  <div class="absolute top-0 left-0 w-full">
    <div class="wave wave-top w-full text-coolGray-900">
      <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
      </svg>
    </div>
    <div class="h-80 md:h-72 w-full bg-coolGray-900"></div>
  </div>
  <div class="absolute top-0 left-0 w-full mt-80 md:mt-72">
    <div class="h-80 md:h-72 xl:h-52 w-full bg-green-500"></div>
    <div class="wave wave-bottom w-full text-green-500">
      <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative py-16 px-4 md:px-24 bg-coolGray-50 rounded-xl">
      <img class="absolute top-0 left-0 w-full h-full object-cover" src="flex-ui-assets/elements/pattern-light1.svg" alt="">
      <div class="relative 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-md">
            <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold leading-snug">The fastest way from idea to live site. Period.</h2>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
          <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Sign up for our newsletter</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Stay in the loop with everything you need to know.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="mx-auto md:mr-0 md:max-w-md">
            <div class="flex flex-wrap mb-1">
              <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
              </div>
              <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
            </div>
            <span class="text-xs text-coolGray-400 font-medium">
              <span>We care about your data in our</span>
              <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
        <div class="w-full md:w-2/3 px-4">
          <a class="block mb-12 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
          <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Product</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Resources</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Careers</a></div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4">
          <div class="flex flex-wrap">
            <div class="w-full lg:flex-1 py-1 lg:py-0 lg:mr-3">

<section class="bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
      <div class="w-full md:w-2/3 px-4">
        <a class="block mb-12 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
        <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Product</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Resources</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Careers</a></div>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4">
        <h3 class="mb-6 text-lg font-bold text-coolGray-900">Newsletter</h3>
        <div class="flex flex-wrap">
          <div class="w-full lg:flex-1 py-1 lg:py-0 lg:mr-3">
            <input class="px-3 w-full h-12 text-coolGray-900 outline-none placeholder-coolGray-500 border border-coolGray-200 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-lg shadow-xsm" placeholder="Your email">
          </div>
          <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-4 px-5 w-full leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Subscribe</a></div>
        </div>
      </div>