Tailwind CSS Components

<section class="bg-white p-8 pb-6">
  <div class="flex flex-wrap items-center justify-between pb-6 -mx-2">
    <div class="w-auto px-2">
      <h2 class="text-lg font-semibold">Section heading title</h2>
    </div>
    <div class="w-auto px-2">
      <a href="#">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="#D5DAE1"></path>
        </svg>
      </a>
    </div>
  </div>
  <ul class="flex flex-wrap border-b border-coolGray-100">
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Active</a></li>
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Upcoming</a></li>
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Saved</a></li>
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Archived</a></li>
  </ul>
</section>

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <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="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="xl:max-w-4xl mb-18 md:mb-16 mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-50 bg-green-500 font-medium uppercase rounded-full">Get Started</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-heading font-bold">The fastest way from idea to live site. Period.</h1>
        <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-heading">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
      </div>
      <div class="relative max-w-4xl mx-auto">
        <img class="absolute top-0 left-0 -mt-6 lg:-mt-12 -ml-6 lg:-ml-12 w-20 lg:w-auto z-10" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
        <img class="absolute bottom-0 right-0 -mb-6 lg:-mb-10-mr-6 lg:-mr-12 w-20 lg:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
        <img class="relative" src="flex-ui-assets/elements/cta/men-computer-placeholder.png" alt="">
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-900">
    <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>

<section class="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">
    <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 md: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 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="#">Open Positions</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="#">About Us</a></div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-max mx-auto">
          <img class="block mb-8" src="flex-ui-assets/images/teams/photo-employee1.png" alt="">
          <h3 class="mb-2 text-3xl md:text-4xl leading-tight font-semibold">Macauley Herring</h3>
          <span class="text-lg font-medium text-green-500">CEO &amp; Founder</span>
        </div>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full lg:w-1/2 p-3">
        <div class="h-full p-6 pb-0 border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
          <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">Acquisition Channels</h2>
            </div>
            <div class="w-auto p-2">
              <button class="flex flex-wrap justify-center w-full px-4 py-2 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">
                <p>View report</p>
              </button>
            </div>
          </div>
          <div class="relative top-9">
            <div class="chart-graph7-stacked"></div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-3">
        <div class="h-full p-6 pb-0 border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
          <div class="flex flex-wrap items-center justify-between -m-2 mb-3">
            <div class="w-auto p-2">

<section class="py-20 xl: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">
    <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-600">Trusted by the top companies in this industry</h3>
    <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-grey.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-grey.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/wishelp-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md: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/resecurb-logo-grey.svg" alt="">
        </div>
      </div>

<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 text-coolGray-900 font-bold">What shipping options do you have?</h3>
          <p class="text-coolGray-500 font-medium">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 text-coolGray-900 font-bold">What payment methods do you accept?</h3>
          <p class="text-coolGray-500 font-medium">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white rounded-md shadow-lg">
      <div class="flex flex-wrap items-center justify-between -mx-2">
        <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
          <h2 class="text-lg text-coolGray-900 font-semibold">Card heading title</h2>
        </div>
        <div class="w-full md:w-1/2 px-2">
          <div class="flex flex-wrap justify-end -m-2">
            <div class="w-full md:w-auto p-2">
              <button class="w-full px-4 py-2 text-sm text-coolGray-500 font-medium bg-white border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">Button Secondary</button>
            </div>
            <div class="w-full md:w-auto p-2">
              <button class="w-full px-4 py-2 text-sm text-white font-medium bg-green-500 hover:bg-green-600 border border-green-600 rounded-md shadow-button">Button CTA</button>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-6 mt-6 border-t border-coolGray-100"></div>
    </div>
  </div>
</section>

<section class="pb-16 md:pb-24 bg-coolGray-50">
  <div class="pt-16 md:pt-24 pb-12 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-repeat: no-repeat; background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-2xl mx-auto text-center">
        <div class="flex items-center justify-center">
          <p class="inline-block text-green-500 font-medium">John Doe</p>
          <span class="mx-1 text-green-500">&bull;</span>
          <p class="inline-block text-green-500 font-medium">19 Jan 2022</p>
        </div>
        <h2 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Lorem ipsum dolor sit amet</h2>
        <p class="mb-6 text-lg md:text-xl font-medium text-coolGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="inline-block py-1 px-3 text-xs leading-5 text-green-900 font-medium uppercase bg-green-100 rounded-full shadow-sm">Technology</div>
      </div>
    </div>
  </div>
  <div class="relative">
    <div class="absolute w-full h-1/2 bg-coolGray-900"></div>
    <div class="container relative px-4 mx-auto">
      <div class="mb-10 mx-auto max-w-max overflow-hidden rounded-lg">
        <img src="flex-ui-assets/images/blog-content/content-photo1.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: center top;">

<section class="py-20 xl: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">
    <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-300">Trusted by the top companies in this industry</h3>
    <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-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-grey.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-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-grey.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-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo-grey.svg" alt="">
        </div>
      </div>

<section class="py-24 md:py-32 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-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 font-bold">Join our community</h3>
        <p class="text-lg text-coolGray-500 font-medium">Start your journey with our product</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 text-coolGray-800 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-coolGray-800 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-coolGray-800 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-20 xl:py-24 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.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-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
      <h3 class="mb-4 text-3xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">Pricing that scales with your business immediately.</p>
      <div class="flex mb-12 mx-auto max-w-max border border-coolGray-200 overflow-hidden rounded-md shadow-lg"><a class="py-3 px-5 text-sm text-green-500 bg-white font-medium border-r border-coolGray-200" href="#">Billed Monthly</a><a class="py-3 px-5 text-sm text-coolGray-500 bg-coolGray-50 font-medium" href="#">Billed Annually</a></div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col pt-8 pb-8 bg-coolGray-50 rounded-md shadow-md hover:scale-105 transition duration-500">
          <div class="flex items-center justify-between px-8">
            <div>
              <h3 class="text-2xl md:text-3xl text-coolGray-800 font-semibold tracking-tighter">Basic plan</h3>
              <p class="text-coolGray-400 font-medium">For bigger teams</p>
            </div>
            <div>
              <span class="relative -top-10 right-1 text-3xl text-coolGray-900 font-bold">$</span>
              <span class="text-6xl md:text-7xl text-coolGray-900 font-semibold tracking-tighter">99</span>
              <span class="inline-block ml-1 text-coolGray-500 font-semibold">/mo</span>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
          <ul class="self-start px-8 pt-8 pb-16">

<section class="py-24 bg-coolGray-900">
  <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="wave-top wave-bottom bg-white">
  <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="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="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <img class="absolute top-6 left-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg">
    <img class="absolute bottom-6 right-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg">
    <div class="container relative z-10 px-4 mx-auto">
      <div class="mx-auto max-w-xl text-center">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter">Sign up for our newsletter</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>

<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-900 overflow-hidden rounded-7xl" style="background-image: url('flex-ui-assets/elements/pattern-dark.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 text-white font-bold tracking-tighter">Be the first to know when we launch</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-400 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="relative py-16 bg-coolGray-900">
  <div class="absolute bottom-0 left-0 h-1/2 w-full bg-coolGray-100"></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>
            <p class="text-lg md:text-xl font-heading font-medium text-coolGray-500">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</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-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto mb-2 md:mb-0 md:mr-4 text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a><a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-coolGray-800 bg-white hover:bg-coolGray-100 font-medium focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 border border-coolGray-100 rounded-md shadow-sm" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-16 bg-coolGray-50">
  <div class="absolute bottom-0 left-0 h-1/2 w-full bg-green-500"></div>
  <div class="container px-4 mx-auto">
    <div class="relative py-16 px-4 md:px-24 bg-coolGray-900 rounded-xl">
      <img class="absolute top-0 left-0 w-full h-full object-cover" src="flex-ui-assets/elements/pattern-dark.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 text-white leading-snug">The fastest way from idea to live site. Period.</h2>
            <p class="text-lg md:text-xl font-heading font-medium text-coolGray-400">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</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-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto mb-2 md:mb-0 md:mr-4 text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a><a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-coolGray-800 bg-white hover:bg-coolGray-100 font-medium focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 border border-coolGray-100 rounded-md shadow-sm" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <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="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="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="xl:max-w-4xl mb-18 md:mb-16 mx-auto 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-full shadow-sm">Get Started</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight font-heading font-bold">The fastest way from idea to live site. Period.</h1>
        <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-heading">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
      </div>
      <div class="relative max-w-4xl mx-auto">
        <img class="absolute top-0 left-0 -mt-6 lg:-mt-12 -ml-6 lg:-ml-12 w-20 lg:w-auto z-10" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
        <img class="absolute bottom-0 right-0 -mb-6 lg:-mb-10-mr-6 lg:-mr-12 w-20 lg:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
        <img class="relative" src="flex-ui-assets/elements/cta/men-computer-placeholder.png" alt="">
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-50">
    <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>

<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-16">
        <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="mb-4 text-4xl md:text-5xl text-white leading-tight font-semibold tracking-tighter">Testimonial from Flex app users</h2>
        <p class="text-xl font-medium text-coolGray-400">With Flex, you can build websites without writing code.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
            <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
            <h4 class="mb-1 text-lg font-semibold">Macauley Herring</h4>
            <p class="text-lg text-coolGray-400">CEO &amp; Founder at Flex.co</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
            <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</h3>

<section class="relative py-24 md:py-32 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="mb-16 h-40 md:h-auto rounded-7xl overflow-hidden">
      <img class="w-full h-full object-cover" src="flex-ui-assets/images/http-codes/banner-dog-error.png" alt="">
    </div>
    <div class="max-w-4xl mx-auto text-center">
      <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">Error 404</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
      <p class="mb-12 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap justify-center">
        <div class="w-full md:w-auto py-1 md:py-0 md: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 border border-green-500 rounded-md shadow-sm" href="#">Go back to Homepage</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="#">Try Again</a></div>
      </div>
    </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="">
</section>

<section class="relative py-24 md:pb-32 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="relative container px-4 mx-auto">
    <div class="xl:max-w-4xl mb-18 md:mb-16 mx-auto 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-full shadow-sm">Get Started</span>
      <h1 class="mb-4 text-3xl md:text-4xl leading-tight font-heading font-bold">The fastest way from idea to live site. Period.</h1>
      <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-heading">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
      <a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
    </div>
    <div class="relative max-w-4xl mx-auto">
      <img class="absolute top-0 left-0 -mt-6 lg:-mt-12 -ml-6 lg:-ml-12 w-20 lg:w-auto z-10" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
      <img class="absolute bottom-0 right-0 -mb-6 lg:-mb-10-mr-6 lg:-mr-12 w-20 lg:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
      <img class="relative" src="flex-ui-assets/elements/cta/men-computer-placeholder.png" alt="">
    </div>
  </div>
</section>