Tailwind CSS Components

<section 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-3/4 px-4">
        <a class="block mb-8 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
        </a>
        <p class="mb-12 text-base md:text-lg text-white font-medium md:max-w-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
        <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 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="#">Help</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="#">Privacy</a></div>
        </div>
      </div>
      <div class="w-full md:w-1/4 px-4">
        <div class="lg:pr-10 lg:ml-auto lg:max-w-max">
          <a class="block mb-4" href="#">
            <img src="flex-ui-assets/elements/app-store-dark.svg" alt="">
          </a>
          <a class="block" href="#">

<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-3/4 px-4">
          <a class="block mb-8 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
          <p class="mb-12 text-base md:text-lg text-white font-medium md:max-w-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
          <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 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="#">Help</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="#">Privacy</a></div>
          </div>
        </div>

<section class="py-20 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 mb-24 lg:mb-16 justify-between items-center">
      <div class="w-full lg:w-1/2 mb-10 lg:mb-0">
        <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">Contact</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
      </div>
      <div class="w-full lg:w-auto"><a class="inline-block py-4 px-6 w-full md:w-auto text-lg leading-6 text-coolGray-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="#">Send Message</a></div>
    </div>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="flex mb-18">
          <div class="inline-flex mr-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
            <svg class="h-6 text-white" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
            </svg>
          </div>
          <div class="mt-2">
            <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-900 font-bold">Email</h3>
            <a class="text-lg text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>
          </div>
        </div>
        <div class="flex mb-18">

<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="relative 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 mb-16 md:mb-0">
      <div class="md:w-1/2 pl-4">
        <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-6 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Great work starts with your app</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-400 font-medium">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 mb-10 text-center md:text-left">
          <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
            <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-coolGray-900 bg-green-500 rounded-lg">
              <svg width="21" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
              </svg>
            </div>
          </div>
          <div class="w-full md:flex-1 md:pt-3">
            <div class="md:max-w-sm">
              <h3 class="mb-4 text-xl md:text-2xl leading-tight text-white font-bold">Measure your performance</h3>
              <p class="text-coolGray-400 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>

<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="py-24 md:pb-32 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 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-full shadow-sm">We are hiring</span>
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium font-bold tracking-tighter">Join our team</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">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>
      <div class="mx-auto max-w-6xl">
        <div class="flex flex-wrap items-center justify-center mb-14 -mx-3">
          <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
            <div class="relative">
              <img class="absolute top-1/2 left-4 transform -translate-y-1/2" src="flex-ui-assets/elements/blog/search.svg" alt="">
              <input class="w-full h-full py-3 pl-12 pr-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="Search">
            </div>
          </div>
          <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
            <div class="relative bg-white border border-coolGray-200 rounded-lg shadow-md">
              <svg class="absolute top-1/2 transform -translate-y-1/2 right-0 mr-5" width="12" height="8" viewbox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: left center;">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-5xl mx-auto mb-16 text-center">
      <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">Blog</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</h3>
      <p class="text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 mb-12 md:mb-20">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/effect.jpg" alt="">
        </a>
        <a class="inline-block mb-4 text-2xl md:text-3xl leading-tight text-white hover:text-coolGray-100 font-bold hover:underline" href="#">A small business is only as good as its tools and it is totally true.</a>
        <a class="inline-flex items-center text-base md:text-lg text-green-500 hover:text-green-600 font-semibold" href="#">
          <span class="mr-3">Read Post</span>
          <svg width="8" height="10" viewbox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.94667 4.74665C7.91494 4.66481 7.86736 4.59005 7.80666 4.52665L4.47333 1.19331C4.41117 1.13116 4.33738 1.08185 4.25617 1.04821C4.17495 1.01457 4.08791 0.997253 4 0.997253C3.82246 0.997253 3.6522 1.06778 3.52667 1.19331C3.46451 1.25547 3.4152 1.32927 3.38156 1.41048C3.34792 1.4917 3.33061 1.57874 3.33061 1.66665C3.33061 1.84418 3.40113 2.01445 3.52667 2.13998L5.72667 4.33331H0.666667C0.489856 4.33331 0.320286 4.40355 0.195262 4.52858C0.070238 4.6536 0 4.82317 0 4.99998C0 5.17679 0.070238 5.34636 0.195262 5.47138C0.320286 5.59641 0.489856 5.66665 0.666667 5.66665H5.72667L3.52667 7.85998C3.46418 7.92196 3.41458 7.99569 3.38074 8.07693C3.34689 8.15817 3.32947 8.24531 3.32947 8.33331C3.32947 8.42132 3.34689 8.50846 3.38074 8.5897C3.41458 8.67094 3.46418 8.74467 3.52667 8.80665C3.58864 8.86913 3.66238 8.91873 3.74361 8.95257C3.82485 8.98642 3.91199 9.00385 4 9.00385C4.08801 9.00385 4.17514 8.98642 4.25638 8.95257C4.33762 8.91873 4.41136 8.86913 4.47333 8.80665L7.80666 5.47331C7.86736 5.40991 7.91494 5.33515 7.94667 5.25331C8.01334 5.09101 8.01334 4.90895 7.94667 4.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/work.jpg" alt="">
        </a>

<section class="relative 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 mb-16 md:mb-0">
    <div class="md:w-1/2 pl-4">
      <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">Application</span>
      <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Great work starts with your app</h3>
      <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">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 mb-10 text-center md:text-left">
        <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
          <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
            <svg width="21" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
            </svg>
          </div>
        </div>
        <div class="w-full md:flex-1 md:pt-3">
          <div class="md:max-w-sm">
            <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Measure your performance</h3>
            <p class="text-coolGray-500 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap mb-10 text-center md:text-left">
        <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
          <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">

<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-3/4 px-4">
        <a class="block mb-8 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
        <p class="mb-12 text-base md:text-lg text-coolGray-400 font-medium md:max-w-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
        <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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
        </div>
      </div>
      <div class="w-full md:w-1/4 px-4">
        <div class="lg:pr-10 lg:ml-auto lg:max-w-max">
          <a class="block mb-4" href="#">
            <img src="flex-ui-assets/elements/app-store.svg" alt="">
          </a>
          <a class="block" href="#">

<section x-data="{ mobileNavOpen: false }" class="bg-white">
  <nav class="flex justify-between p-6 px-4">
    <div class="flex justify-center items-center w-full">
      <div class="w-auto md:w-1/3">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger block max-w-max" href="#">
          <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>
          </svg>
        </button>
      </div>
      <div class="w-1/2 md:w-1/3">
        <a class="flex justify-center max-w-max mx-auto px-4" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
      </div>
      <div class="flex justify-end w-1/2 md:w-1/3">
        <div class="relative">
          <svg class="absolute top-1/2 left-4 transform -translate-y-1/2" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.0467 11.22L12.6667 9.80667C12.3698 9.5245 11.9954 9.33754 11.5915 9.26983C11.1876 9.20211 10.7726 9.25673 10.4 9.42667L9.80001 8.82667C10.5071 7.88194 10.8299 6.70445 10.7037 5.53122C10.5775 4.358 10.0115 3.27615 9.11963 2.50347C8.2278 1.73078 7.07637 1.32464 5.89712 1.36679C4.71788 1.40894 3.59838 1.89626 2.76399 2.73065C1.92961 3.56503 1.44229 4.68453 1.40014 5.86378C1.35799 7.04302 1.76413 8.19446 2.53681 9.08629C3.3095 9.97812 4.39134 10.5441 5.56457 10.6704C6.7378 10.7966 7.91529 10.4737 8.86001 9.76667L9.45335 10.36C9.26341 10.7331 9.19534 11.1564 9.25873 11.5702C9.32212 11.984 9.51377 12.3675 9.80668 12.6667L11.22 14.08C11.595 14.4545 12.1033 14.6649 12.6333 14.6649C13.1633 14.6649 13.6717 14.4545 14.0467 14.08C14.2372 13.8937 14.3885 13.6713 14.4919 13.4257C14.5952 13.1802 14.6484 12.9164 14.6484 12.65C14.6484 12.3836 14.5952 12.1198 14.4919 11.8743C14.3885 11.6287 14.2372 11.4063 14.0467 11.22V11.22ZM8.39335 8.39333C7.92684 8.85866 7.33288 9.1753 6.68651 9.30323C6.04013 9.43117 5.37034 9.36466 4.76175 9.11212C4.15315 8.85958 3.63305 8.43234 3.26716 7.88436C2.90126 7.33638 2.70597 6.69224 2.70597 6.03333C2.70597 5.37442 2.90126 4.73029 3.26716 4.18231C3.63305 3.63433 4.15315 3.20708 4.76175 2.95454C5.37034 2.702 6.04013 2.6355 6.68651 2.76343C7.33288 2.89137 7.92684 3.208 8.39335 3.67333C8.70377 3.98297 8.95005 4.35081 9.1181 4.75577C9.28614 5.16074 9.37264 5.59488 9.37264 6.03333C9.37264 6.47178 9.28614 6.90592 9.1181 7.31089C8.95005 7.71586 8.70377 8.08369 8.39335 8.39333V8.39333ZM13.1067 13.1067C13.0447 13.1692 12.971 13.2187 12.8897 13.2526C12.8085 13.2864 12.7214 13.3039 12.6333 13.3039C12.5453 13.3039 12.4582 13.2864 12.377 13.2526C12.2957 13.2187 12.222 13.1692 12.16 13.1067L10.7467 11.6933C10.6842 11.6314 10.6346 11.5576 10.6008 11.4764C10.5669 11.3951 10.5495 11.308 10.5495 11.22C10.5495 11.132 10.5669 11.0449 10.6008 10.9636C10.6346 10.8824 10.6842 10.8086 10.7467 10.7467C10.8087 10.6842 10.8824 10.6346 10.9636 10.6007C11.0449 10.5669 11.132 10.5495 11.22 10.5495C11.308 10.5495 11.3952 10.5669 11.4764 10.6007C11.5576 10.6346 11.6314 10.6842 11.6933 10.7467L13.1067 12.16C13.1692 12.222 13.2188 12.2957 13.2526 12.3769C13.2865 12.4582 13.3039 12.5453 13.3039 12.6333C13.3039 12.7213 13.2865 12.8085 13.2526 12.8897C13.2188 12.971 13.1692 13.0447 13.1067 13.1067V13.1067Z" fill="#BBC3CF"></path>
          </svg>
          <input class="w-full md:w-52 h-9 py-1 pl-9 pr-4 text-sm text-coolGray-500 font-medium placeholder-coolGray-400 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="Search">
        </div>
      </div>

<section class="py-24 md:pb-32 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 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-full shadow-sm">We are hiring</span>
      <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium font-bold tracking-tighter">Join our team</h3>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">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>
    <div class="mx-auto max-w-6xl">
      <div class="flex flex-wrap items-center justify-center mb-14 -mx-3">
        <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
          <div class="relative">
            <img class="absolute top-1/2 left-4 transform -translate-y-1/2" src="flex-ui-assets/elements/blog/search.svg" alt="">
            <input class="w-full h-full py-3 pl-12 pr-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="Search">
          </div>
        </div>
        <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
          <div class="relative bg-white border border-coolGray-200 rounded-lg shadow-md">
            <svg class="absolute top-1/2 transform -translate-y-1/2 right-0 mr-5" width="12" height="8" viewbox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.0002 1.17C10.8128 0.983753 10.5594 0.879211 10.2952 0.879211C10.031 0.879211 9.77756 0.983753 9.59019 1.17L6.00019 4.71L2.46019 1.17C2.27283 0.983753 2.01938 0.879211 1.75519 0.879211C1.49101 0.879211 1.23756 0.983753 1.05019 1.17C0.956464 1.26297 0.88207 1.37357 0.831301 1.49543C0.780533 1.61729 0.754395 1.74799 0.754395 1.88C0.754395 2.01202 0.780533 2.14272 0.831301 2.26458C0.88207 2.38644 0.956464 2.49704 1.05019 2.59L5.29019 6.83C5.38316 6.92373 5.49376 6.99813 5.61562 7.04889C5.73747 7.09966 5.86818 7.1258 6.00019 7.1258C6.1322 7.1258 6.26291 7.09966 6.38477 7.04889C6.50663 6.99813 6.61723 6.92373 6.71019 6.83L11.0002 2.59C11.0939 2.49704 11.1683 2.38644 11.2191 2.26458C11.2699 2.14272 11.296 2.01202 11.296 1.88C11.296 1.74799 11.2699 1.61729 11.2191 1.49543C11.1683 1.37357 11.0939 1.26297 11.0002 1.17Z" fill="#556987"></path>
            </svg>
            <select class="px-4 py-3 w-full appearance-none outline-none border-0 bg-transparent hover:cursor-pointer leading-6 text-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-lg" name="">
              <option value="1">Location</option>
              <option value="2">Country</option>
              <option value="3">City</option>

<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-3/4 px-4">
          <a class="block mb-8 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
          <p class="mb-12 text-base md:text-lg text-coolGray-400 font-medium md:max-w-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
          <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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 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-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
          </div>
        </div>

<section class="py-24 md:pb-28 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-light1.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 leading-tight font-semibold tracking-tighter">Testimonial from Flex app users</h2>
      <p class="text-xl font-medium text-coolGray-500">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>
          <h4 class="mb-1 text-lg font-semibold">Ivan Mathews</h4>
          <p class="text-lg text-coolGray-400">CTO 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">

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 w-full bg-white max-w-md border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <h3 class="mb-4 text-lg md:text-xl text-coolGray-900 font-semibold">Cookie Policy</h3>
      <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 mb-6 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>
      <a class="inline-block py-3 px-5 mb-4 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><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>
</div>

<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="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-50" 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 -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
          <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">Rich text</span>
          <h3 class="mb-5 text-3xl md:text-4xl text-coolGray-900 font-bold tracking-tighter">Flex is a simple, beautiful tool that helps you work sanely</h3>
          <p class="mb-6 text-lg md:text-xl leading-8 text-coolGray-500 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
          <p class="text-lg font-medium leading-7 text-coolGray-500">Flex is the only saas business platform that lets you run your business on one platform.</p>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">
            <span>With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</span>
            <ol class="mb-5 list-decimal list-inside text-lg font-medium leading-7 text-coolGray-500">
              <li>
                <span class="text-lg font-medium leading-8 text-coolGray-500">Enterprise software for startups</span>
              </li>

<section class="bg-white p-8">
  <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
      <h2 class="mb-2 font-semibold text-black text-3xl">Page heading name</h2>
      <p class="text-coolGray-500 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="w-full md:w-1/2 p-2">
      <div class="flex flex-wrap justify-end -m-2">
        <div class="w-full md:w-auto p-2">
          <button class="flex flex-wrap items-center justify-center py-3 px-4 w-full text-base text-coolGray-500 font-medium bg-white border border-gray-200 hover:border-gray-300 rounded-md shadow-button">
            <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0V0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18V18ZM14 9H11V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5C9.73479 5 9.48043 5.10536 9.2929 5.29289C9.10536 5.48043 9 5.73478 9 6V9H6C5.73479 9 5.48043 9.10536 5.2929 9.29289C5.10536 9.48043 5 9.73478 5 10C5 10.2652 5.10536 10.5196 5.2929 10.7071C5.48043 10.8946 5.73479 11 6 11H9V14C9 14.2652 9.10536 14.5196 9.2929 14.7071C9.48043 14.8946 9.73479 15 10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14V11H14C14.2652 11 14.5196 10.8946 14.7071 10.7071C14.8946 10.5196 15 10.2652 15 10C15 9.73478 14.8946 9.48043 14.7071 9.29289C14.5196 9.10536 14.2652 9 14 9Z" fill="#D5DAE1"></path>
            </svg>
            <span>Button</span>
          </button>
        </div>
        <div class="w-full md:w-auto p-2">
          <button class="flex flex-wrap items-center justify-center py-3 px-4 w-full text-base text-white font-medium bg-green-500 hover:bg-green-600 rounded-md shadow-button">
            <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0V0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18V18ZM14 9H11V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5C9.73479 5 9.48043 5.10536 9.2929 5.29289C9.10536 5.48043 9 5.73478 9 6V9H6C5.73479 9 5.48043 9.10536 5.2929 9.29289C5.10536 9.48043 5 9.73478 5 10C5 10.2652 5.10536 10.5196 5.2929 10.7071C5.48043 10.8946 5.73479 11 6 11H9V14C9 14.2652 9.10536 14.5196 9.2929 14.7071C9.48043 14.8946 9.73479 15 10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14V11H14C14.2652 11 14.5196 10.8946 14.7071 10.7071C14.8946 10.5196 15 10.2652 15 10C15 9.73478 14.8946 9.48043 14.7071 9.29289C14.5196 9.10536 14.2652 9 14 9Z" fill="#D5DAE1"></path>
            </svg>
            <span>Button</span>
          </button>
        </div>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-green-100 border border-green-200 rounded-md">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="text-green-500 relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.99992 6.66666C7.82311 6.66666 7.65354 6.7369 7.52852 6.86192C7.40349 6.98695 7.33325 7.15652 7.33325 7.33333V8.66666C7.33325 8.84347 7.40349 9.01304 7.52852 9.13806C7.65354 9.26309 7.82311 9.33333 7.99992 9.33333C8.17673 9.33333 8.3463 9.26309 8.47132 9.13806C8.59635 9.01304 8.66659 8.84347 8.66659 8.66666V7.33333C8.66659 7.15652 8.59635 6.98695 8.47132 6.86192C8.3463 6.7369 8.17673 6.66666 7.99992 6.66666ZM13.6399 6.45333C13.5515 5.4764 13.2111 4.53915 12.6518 3.73327C12.0926 2.92738 11.3337 2.28047 10.4495 1.85582C9.56522 1.43118 8.5859 1.24333 7.60729 1.31067C6.62869 1.37801 5.68432 1.69823 4.86659 2.23999C4.16605 2.70842 3.57796 3.32619 3.14455 4.04892C2.71114 4.77165 2.44318 5.5814 2.35992 6.41999C2.27824 7.2531 2.38304 8.09394 2.6667 8.88151C2.95037 9.66908 3.40579 10.3836 3.99992 10.9733L7.53325 14.5133C7.59523 14.5758 7.66896 14.6254 7.7502 14.6593C7.83144 14.6931 7.91858 14.7105 8.00659 14.7105C8.09459 14.7105 8.18173 14.6931 8.26297 14.6593C8.34421 14.6254 8.41794 14.5758 8.47992 14.5133L11.9999 10.9733C12.5941 10.3836 13.0495 9.66908 13.3331 8.88151C13.6168 8.09394 13.7216 7.2531 13.6399 6.41999V6.45333ZM11.0666 10.0333L7.99992 13.1L4.93325 10.0333C4.48131 9.58136 4.13512 9.03488 3.91957 8.43317C3.70401 7.83145 3.62444 7.18946 3.68659 6.55333C3.74913 5.9074 3.95443 5.28343 4.28763 4.72656C4.62084 4.16968 5.07362 3.6938 5.61325 3.33333C6.32055 2.86348 7.15079 2.61286 7.99992 2.61286C8.84905 2.61286 9.67929 2.86348 10.3866 3.33333C10.9246 3.69241 11.3764 4.16618 11.7095 4.72062C12.0426 5.27506 12.2488 5.8964 12.3133 6.53999C12.3774 7.17828 12.2989 7.82284 12.0832 8.42703C11.8676 9.03121 11.5204 9.57988 11.0666 10.0333ZM8.61325 5.04666C8.59994 5.00571 8.57964 4.96736 8.55325 4.93333L8.47325 4.83333C8.39366 4.75776 8.29665 4.703 8.19082 4.67393C8.08499 4.64485 7.97361 4.64236 7.86659 4.66666H7.74659L7.62659 4.72666L7.52659 4.81333L7.44659 4.91333C7.4202 4.94736 7.3999 4.98571 7.38659 5.02666C7.36629 5.06636 7.35277 5.10917 7.34659 5.15333C7.33553 5.21265 7.33106 5.27302 7.33325 5.33333C7.33094 5.42293 7.34918 5.51187 7.38659 5.59333C7.42055 5.67201 7.46792 5.74419 7.52659 5.80666C7.59004 5.86896 7.66468 5.91872 7.74659 5.95333C7.90979 6.01533 8.09005 6.01533 8.25325 5.95333C8.33427 5.91709 8.40864 5.86751 8.47325 5.80666C8.53192 5.74419 8.57929 5.67201 8.61325 5.59333C8.64828 5.51111 8.66642 5.42269 8.66659 5.33333C8.66985 5.29117 8.66985 5.24882 8.66659 5.20666C8.66038 5.15014 8.6422 5.0956 8.61325 5.04666Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="mb-2 font-medium text-sm text-green-900">An example of an informational alert</h3>
              <p class="mb-4 font-medium text-sm text-green-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <div class="flex flex-wrap -m-3">
                <div class="w-auto p-3">
                  <a class="flex items-center font-medium text-sm text-green-900 hover:text-green-800" href="#">
                    <p class="mr-2">Learn More</p>
                    <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.9467 7.74666C11.9149 7.66483 11.8674 7.59007 11.8067 7.52666L8.47333 4.19333C8.41117 4.13117 8.33738 4.08186 8.25617 4.04822C8.17495 4.01458 8.08791 3.99727 8 3.99727C7.82247 3.99727 7.6522 4.06779 7.52667 4.19333C7.46451 4.25549 7.4152 4.32928 7.38156 4.4105C7.34792 4.49171 7.33061 4.57876 7.33061 4.66666C7.33061 4.8442 7.40113 5.01446 7.52667 5.14L9.72667 7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82319 4 8C4 8.17681 4.07024 8.34638 4.19526 8.4714C4.32029 8.59643 4.48986 8.66666 4.66667 8.66666H9.72667L7.52667 10.86C7.46418 10.922 7.41459 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41459 11.671 7.46418 11.7447 7.52667 11.8067C7.58864 11.8691 7.66238 11.9187 7.74362 11.9526C7.82486 11.9864 7.91199 12.0039 8 12.0039C8.08801 12.0039 8.17515 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8067L11.8067 8.47333C11.8674 8.40993 11.9149 8.33516 11.9467 8.25333C12.0133 8.09102 12.0133 7.90897 11.9467 7.74666Z" fill="currentColor"></path>
                    </svg>
                  </a>
                </div>
              </div>

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 w-full bg-coolGray-900 max-w-md border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <h3 class="mb-4 text-lg md:text-xl text-white font-semibold">Cookie Policy</h3>
      <p class="mb-4 text-coolGray-400 font-medium">We use third-party cookies in order to personalise your experience</p>
      <a class="flex items-center mb-6 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>
      <a class="inline-block py-3 px-5 mb-4 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><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-coolGray-600 hover:bg-coolGray-700 font-medium text-center focus:ring-2 focus:ring-coolGray-600 focus:ring-opacity-50 border border-coolGray-800 rounded-md shadow-sm" href="#">Decline</a>
    </div>
  </div>
</div>

<section class="py-20 xl:pt-24 xl:pb-32 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="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">Numbers</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter">We believe in the power of data</h3>
      <p class="mb-16 xl:mb-24 mx-auto text-lg md:text-xl text-coolGray-400 font-medium max-w-4xl">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 justify-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 text-green-600 font-bold 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 text-4xl md:text-5xl text-green-600 font-bold 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 text-4xl md:text-5xl text-green-600 font-bold 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 text-4xl md:text-5xl text-green-600 font-bold tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</p>
        </div>
      </div>

<section class="py-24 md:pt-32 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="relative max-w-xl mx-auto pt-14 pb-16 px-8 bg-white rounded-4xl shadow-2xl">
      <a class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-block" href="#">
        <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
      </a>
      <div class="max-w-sm mx-auto">
        <div class="mb-6 text-center">
          <h3 class="mb-4 text-2xl md:text-3xl font-bold">Sign in to your account</h3>
          <p class="text-lg text-coolGray-500 font-medium">Start your demo version</p>
        </div>
        <form action="">
          <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="email" 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">
            <div class="w-full md:w-1/2">
              <label class="relative inline-flex items-center">
                <input class="form-checkbox appearance-none" type="checkbox">

<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 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>