Tailwind CSS Components

<section class="py-24 bg-coolGray-50 overflow-hidden" 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 -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <div class="relative mx-auto md:ml-0 max-w-max">
          <img class="absolute z-10 -right-8 -top-8 w-28 md:w-auto" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
          <img class="absolute z-10 -left-10 -bottom-8 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
          <img src="flex-ui-assets/images/how-it-works/stock.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <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">How it works</span>
        <h2 class="mb-12 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h2>
        <div class="flex flex-wrap -mx-4 text-center md:text-left">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-white bg-green-500 font-semibold rounded-full">1</div>
            <h3 class="mb-2 text-xl font-bold">Custom analytics</h3>
            <p class="font-medium text-coolGray-500">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-white bg-green-500 font-semibold rounded-full">2</div>
            <h3 class="mb-2 text-xl font-bold">Team Management</h3>
            <p class="font-medium text-coolGray-500">Our calendar lets you know what is happening with customer and projects so you are able to control process.</p>
          </div>

<div 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>
  <section class="py-20 xl: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 justify-center text-center -mx-4">
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 text-4xl md:text-5xl font-bold text-white tracking-tighter">235.000</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">$10m</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">APR</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">+50.000</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</p>

<div class="fixed z-50 bottom-0 w-full p-6 md:p-12">
  <div class="p-10 mx-auto w-full bg-white max-w-6xl border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <p class="mb-4 text-coolGray-500 font-medium">We use third-party cookies in order to personalise your experience</p>
          <a class="flex items-center font-medium text-green-500 hover:text-green-600" href="#">
            <span class="mr-2">Read our cookie policy</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="flex flex-wrap justify-end">
            <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-3 px-5 w-full leading-5 text-coolGray-800 bg-white hover:bg-coolGray-100 font-medium text-center focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">Decline</a></div>
            <div class="w-full md:w-auto py-1 md:py-0"><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="#">Allow</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="bg-white overflow-hidden 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="relative bg-coolGray-900">
    <img class="absolute top-0 right-0 mr-4 lg:mr-12 mt-4 md:mt-0 h-20 md:h-auto" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
    <img class="absolute bottom-0 left-0 ml-4 lg:ml-12 mb-4 md:mb-0 h-20 md:h-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-4xl py-16 mx-auto text-center">
        <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold text-white">The fastest way from idea to live site. Period.</h2>
        <p class="mb-6 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. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <a class="inline-block py-3 px-7 w-full md:w-auto text-lg leading-7 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 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
      </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="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

<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>
  <div class="border-b border-coolGray-100"></div>
</section>

<section class="py-20 md:py-28 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 mx-auto text-center">
      <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold">The fastest way from idea to live site. Period.</h2>
      <p class="mb-6 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. We believe a diverse team, approaches to work and transparency are key to our success.</p>
      <a class="inline-block py-3 px-7 w-full md:w-auto text-lg leading-7 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 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
    </div>
  </div>
</section>

<section class="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.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-white font-bold tracking-tighter">Sign up for our newsletter</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>
  </div>
</section>

<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" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="pt-24 pb-11 mx-auto max-w-4xl">
        <a class="block md:mx-auto mb-5 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
        </a>
        <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Product</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Resources</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Careers</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Help</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="border-b border-coolGray-800"></div>

<section x-data="{ mobileNavOpen: false }" class="bg-white">
  <nav class="flex justify-between p-6 px-4">
    <div class="flex justify-between items-center w-full">
      <div class="xl:w-1/3">
        <a class="block max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
      </div>
      <div class="hidden xl:block xl:w-1/3">
        <ul class="flex justify-center">
          <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
          <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
          <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
          <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="hidden xl:block xl:w-1/3">
        <div class="flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
      </div>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
      <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect class="text-coolGray-50" width="32" height="32" rx="6" fill="currentColor"></rect>
        <path class="text-coolGray-500" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>

<section class="relative py-20 md:py-28 bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <img class="absolute top-0 left-0 ml-4 lg:ml-12 mt-6 md:mt-12" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
  <img class="absolute bottom-0 right-0 mr-4 lg:mr-12 mb-6 md:mb-12" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="xl:max-w-4xl mx-auto text-center">
      <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold text-white">The fastest way from idea to live site. Period.</h2>
      <p class="mb-6 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. We believe a diverse team, approaches to work and transparency are key to our success.</p>
      <a class="inline-block py-3 px-7 w-full md:w-auto text-lg leading-7 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 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
    </div>
  </div>
</section>

<section class="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="pt-24 pb-11 mx-auto max-w-4xl">
      <a class="block md:mx-auto mb-5 max-w-max" href="#">
        <svg class="text-green-500" width="95" height="32" viewbox="0 0 95 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path class="text-coolGray-900" d="M54.3157 6.71125V10.2982H46.8277V14.1731H52.4306V17.6552H46.8277V25.0909H42.3506V6.71125H54.3157Z" fill="currentColor"></path>
          <path class="text-coolGray-900" d="M61.1459 5.71634V25.0909H56.6688V5.71634H61.1459Z" fill="currentColor"></path>
          <path class="text-coolGray-900" d="M78.162 17.5505C78.162 17.9694 78.1358 18.4058 78.0835 18.8596H67.9511C68.0209 19.7672 68.3089 20.4654 68.8151 20.9542C69.3387 21.4254 69.9758 21.6611 70.7264 21.6611C71.8434 21.6611 72.6202 21.1898 73.0565 20.2472H77.8216C77.5773 21.2072 77.1322 22.0712 76.4864 22.8392C75.858 23.6072 75.0638 24.2094 74.1038 24.6458C73.1438 25.0822 72.0704 25.3003 70.8834 25.3003C69.4522 25.3003 68.178 24.9949 67.0609 24.384C65.9438 23.7731 65.0711 22.9003 64.4427 21.7658C63.8144 20.6312 63.5002 19.3047 63.5002 17.7862C63.5002 16.2676 63.8056 14.9411 64.4165 13.8065C65.0449 12.672 65.9176 11.7992 67.0347 11.1883C68.1518 10.5774 69.4347 10.272 70.8834 10.272C72.2973 10.272 73.554 10.5687 74.6536 11.1622C75.7533 11.7556 76.6085 12.6022 77.2195 13.7018C77.8478 14.8014 78.162 16.0843 78.162 17.5505ZM73.5802 16.3723C73.5802 15.6043 73.3184 14.9934 72.7947 14.5396C72.2711 14.0858 71.6165 13.8589 70.8311 13.8589C70.0805 13.8589 69.4434 14.0771 68.9198 14.5134C68.4136 14.9498 68.0994 15.5694 67.9773 16.3723H73.5802Z" fill="currentColor"></path>
          <path class="text-coolGray-900" d="M89.1639 25.0909L86.3624 21.0327L84.0061 25.0909H79.1624L83.9799 17.6291L79.0315 10.4814H84.0584L86.8599 14.5134L89.2162 10.4814H94.0599L89.1639 17.8385L94.1908 25.0909H89.1639Z" fill="currentColor"></path>
          <path d="M14.626 9.94598C19.0055 11.4917 23.7285 11.4058 28.0651 9.73131C28.108 7.97092 27.6357 6.21053 26.8199 4.62189L26.3906 3.76316C26.2618 3.8061 26.09 3.89198 26.0041 3.97785C22.054 5.86705 17.5886 6.12467 13.4238 4.6219C10.5042 3.59143 7.32687 3.84904 4.57895 5.223L3.72023 5.65236C3.76316 5.78117 3.84904 5.95291 3.93492 6.03878C4.45015 7.15513 4.87951 8.35735 5.18006 9.6025C8.1856 8.74377 11.5346 8.82964 14.626 9.94598Z" fill="currentColor"></path>
          <path d="M3.93493 22.8698L4.87952 22.3546C6.7935 21.3976 8.90498 20.9343 11 20.9954C12.2888 21.033 13.5713 21.269 14.7978 21.7105C15.1973 21.8523 15.5981 21.9824 16 22.1011V26.6777C14.3376 26.3686 12.6547 26.3245 11 26.5375C9.28349 26.7585 7.59733 27.2562 5.99586 28.0221C5.90999 28.108 5.73824 28.1939 5.60943 28.2368L5.18007 27.3781C4.45015 25.9612 4.0208 24.4155 3.93493 22.8698Z" fill="currentColor"></path>
          <path d="M4.45002 18.9197C8.0996 17.4169 12.1786 17.2881 15.914 18.6191C19.3489 19.8213 22.9985 20.036 26.4334 19.2631C26.3905 17.331 26.6481 15.4418 27.3351 13.5526C22.8267 14.8836 17.9749 14.7548 13.4666 13.1662C10.8905 12.2216 8.05667 12.2216 5.48049 13.0803C5.52343 14.9266 5.17995 16.8158 4.5359 18.662C4.5359 18.662 4.49296 18.7909 4.45002 18.9197Z" fill="currentColor"></path>
        </svg>
      </a>
      <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Product</a></div>
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></div>
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></div>
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Resources</a></div>
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
        <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
      </div>
    </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="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="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-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">
    <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">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/welytics-logo.svg" alt="">
      </div>
    </div>
  </div>
</section>

<section class="bg-white overflow-hidden wave-top wave-bottom">
  <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="relative bg-coolGray-50">
    <img class="absolute top-0 right-0 mr-4 lg:mr-12 mt-4 md:mt-0 h-20 md:h-auto" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
    <img class="absolute bottom-0 left-0 ml-4 lg:ml-12 mb-4 md:mb-0 h-20 md:h-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-4xl py-16 mx-auto text-center">
        <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold">The fastest way from idea to live site. Period.</h2>
        <p class="mb-6 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. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <a class="inline-block py-3 px-7 w-full md:w-auto text-lg leading-7 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 border border-transparent rounded-md shadow-sm" href="#">Get Started</a>
      </div>
    </div>
  </div>
  <div class="wave-bottom w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

<section class="relative py-24 md:py-44 lg:py-64 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="relative z-10 container px-4 mx-auto">
    <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">Page not found</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="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="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-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 -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="relative mx-auto md:ml-0 max-w-max">
            <img class="absolute z-10 -right-8 -top-8 w-28 md:w-auto" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -left-10 -bottom-8 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img src="flex-ui-assets/images/how-it-works/stock.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">How it works</span>
          <h2 class="mb-12 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h2>
          <div class="flex flex-wrap -mx-4 text-center md:text-left">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">1</div>
              <h3 class="mb-2 text-xl text-white font-bold">Custom analytics</h3>
              <p class="font-medium text-coolGray-400">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</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="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-10 mx-auto text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter max-w-5xl">Great work starts with your app</h3>
      <div class="relative mb-10 mx-auto max-w-max">
        <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle1-yellow.svg" alt="">
        <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots1-blue.svg" alt="">
        <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
        <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook2.png" alt="">
      </div>
      <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-400 font-medium max-w-4xl">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</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 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="#">Learn More</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-600 hover:bg-coolGray-700 font-medium text-center focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">About Us</a></div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ current: 0 }" class="py-24 md:pb-28 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-light-big.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-green.svg" alt="">
          <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.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 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 font-semibold">Darren Dunlap</h3>
          <span class="text-lg text-coolGray-500 font-medium">CEO &amp; Founder at Flex.co</span>
        </div>
      </div>
      <div x-show="current === 1">
        <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-green.svg" alt="">
          <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.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 font-semibold tracking-tighter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h2>

<section class="wave-top wave-bottom 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="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-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-20 lg:mb-0">
          <div class="max-w-md mx-auto">
            <h2 class="mb-8 text-4xl md:text-5xl font-heading font-bold text-white md:leading-15">Join 6,000+ startups growing with Flex</h2>
            <ul class="mb-8">
              <li class="flex items-center mb-4">
                <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
                <span class="text-lg md:text-xl font-heading text-coolGray-400">Mauris pellentesque congue libero nec</span>
              </li>
              <li class="flex items-center mb-4">
                <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
                <span class="text-lg md:text-xl font-heading text-coolGray-400">Suspendisse mollis tincidunt</span>
              </li>
              <li class="flex items-center">
                <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
                <span class="text-lg md:text-xl font-heading text-coolGray-400">Praesent varius justo vel justo pulvinar</span>

<section class="overflow-hidden min-h-full">
  <div class="relative z-50 flex items-center justify-between xl:hidden bg-coolGray-50 px-8 py-5 -mx-3">
    <div class="w-auto px-3">
      <a class="block max-w-max" href="#">
        <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
      </a>
    </div>
    <div class="w-auto px-3">
      <button class="navbar-burger self-center ml-auto block xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-100" width="32" height="32" rx="6" fill="currentColor"></rect>
          <path class="text-coolGray-400" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="navbar-menu z-50 fixed top-0 hidden flex xl:flex flex-col justify-between bg-coolGray-50 max-w-xs w-9/12 h-full overflow-y-auto">
    <div class="navbar-backdrop fixed xl:hidden inset-0 bg-coolGray-900 opacity-60"></div>
    <div class="relative bg-coolGray-50">
      <div class="fixed -left-4 p-8 pl-12 max-w-xs w-9/12 z-50 bg-coolGray-50">
        <a class="block max-w-max" href="#">
          <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
        </a>
      </div>