Tailwind CSS Components

<section class="py-24 md:pb-28 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="md:max-w-4xl mx-auto mb-16 md:mb-20 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">Features</span>
      <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h1>
      <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 every aspect of your business in one secure platform.</p>
    </div>
    <div class="relative mb-8 md:mb-24 mx-auto max-w-max">
      <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
      <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
      <img src="flex-ui-assets/images/features/stock3.png" alt="">
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="h-full p-8 text-center hover:bg-coolGray-700 rounded-md hover:shadow-xl transition duration-200">
          <div class="inline-flex h-16 w-16 mb-7 mx-auto items-center justify-center text-coolGray-900 bg-green-500 rounded-lg">
            <svg width="24" height="24" 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>
          <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">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>

<section class="overflow-hidden min-h-full">
  <div class="relative z-50 flex items-center justify-between xl:hidden bg-white 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-white border-r border-coolGray-100 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-white">
      <div class="fixed -left-4 p-8 pl-12 max-w-xs w-9/12 z-50 bg-white">
        <a class="block max-w-max" href="#">
          <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
        </a>
      </div>

<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="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-20 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 mb-24 lg:mb-18 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-900 bg-green-100 font-medium uppercase rounded-9xl">Contact</span>
          <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter leading-tight">Let&rsquo;s stay connected</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
        </div>
        <div class="w-full lg:w-auto">
          <div class="flex flex-wrap justify-center items-center md:justify-start -mb-2"><a class="inline-block py-4 px-6 mb-2 md:mb-0 w-full md:w-auto md:mr-5 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 border border-transparent rounded-md shadow-sm" href="#">Open Positions</a><a class="inline-block py-4 px-6 w-full md:w-auto text-lg leading-6 font-medium text-center text-coolGray-800 bg-white border border-coolGray-200 hover:border-coolGray-300 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 rounded-md shadow-sm" href="#">About Us</a></div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-10">
              <div class="max-w-xs mx-auto">
                <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">

<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="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-20 xl: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-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
        <h3 class="mb-6 text-3xl md:text-5xl text-white font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
        <div class="flex items-center justify-center w-full mb-12">
          <a class="inline-block mr-4 text-lg md:text-xl text-coolGray-500 font-medium" href="#">Billed Monthly</a>
          <label class="flex items-center cursor-pointer rounded-full shadow-lg" for="toggle">
            <div class="relative">
              <input class="sr-only" id="toggleB" type="checkbox">
              <div class="block bg-green-500 w-20 h-9 rounded-full"></div>
              <div class="dot absolute right-1 top-1 bg-white w-7 h-7 rounded-full shadow-lg"></div>
            </div>
          </label>
          <a class="inline-block ml-4 text-lg md:text-xl text-coolGray-50 font-medium" href="#">Billed Annually</a>
        </div>
      </div>
      <div class="flex flex-wrap justify-center -mx-4">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center -m-3">
      <div class="w-full md:w-1/2 xl:w-1/5 p-3">
        <div class="p-8 bg-white border border-coolGray-100 rounded-md shadow-dashboard">
          <div class="mb-4 max-w-max bg-green-100 text-green-500 p-3 rounded-md">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6667 11.3333H1.33333C1.15652 11.3333 0.98695 11.4035 0.861926 11.5286C0.736902 11.6536 0.666664 11.8231 0.666664 12C0.666664 12.1768 0.736902 12.3463 0.861926 12.4714C0.98695 12.5964 1.15652 12.6666 1.33333 12.6666H14.6667C14.8435 12.6666 15.013 12.5964 15.1381 12.4714C15.2631 12.3463 15.3333 12.1768 15.3333 12C15.3333 11.8231 15.2631 11.6536 15.1381 11.5286C15.013 11.4035 14.8435 11.3333 14.6667 11.3333ZM14.6667 14H1.33333C1.15652 14 0.98695 14.0702 0.861926 14.1952C0.736902 14.3202 0.666664 14.4898 0.666664 14.6666C0.666664 14.8434 0.736902 15.013 0.861926 15.138C0.98695 15.2631 1.15652 15.3333 1.33333 15.3333H14.6667C14.8435 15.3333 15.013 15.2631 15.1381 15.138C15.2631 15.013 15.3333 14.8434 15.3333 14.6666C15.3333 14.4898 15.2631 14.3202 15.1381 14.1952C15.013 14.0702 14.8435 14 14.6667 14ZM4 4.66663C3.86814 4.66663 3.73925 4.70573 3.62962 4.77898C3.51998 4.85223 3.43454 4.95635 3.38408 5.07817C3.33362 5.19999 3.32042 5.33403 3.34614 5.46335C3.37186 5.59267 3.43536 5.71146 3.52859 5.8047C3.62183 5.89793 3.74062 5.96143 3.86994 5.98715C3.99926 6.01287 4.1333 5.99967 4.25512 5.94921C4.37694 5.89875 4.48106 5.81331 4.55431 5.70367C4.62756 5.59404 4.66666 5.46515 4.66666 5.33329C4.66666 5.15648 4.59643 4.98691 4.4714 4.86189C4.34638 4.73686 4.17681 4.66663 4 4.66663ZM13.3333 0.666626H2.66666C2.13623 0.666626 1.62752 0.87734 1.25245 1.25241C0.877378 1.62749 0.666664 2.13619 0.666664 2.66663V7.99996C0.666664 8.53039 0.877378 9.0391 1.25245 9.41417C1.62752 9.78925 2.13623 9.99996 2.66666 9.99996H13.3333C13.8638 9.99996 14.3725 9.78925 14.7475 9.41417C15.1226 9.0391 15.3333 8.53039 15.3333 7.99996V2.66663C15.3333 2.13619 15.1226 1.62749 14.7475 1.25241C14.3725 0.87734 13.8638 0.666626 13.3333 0.666626V0.666626ZM14 7.99996C14 8.17677 13.9298 8.34634 13.8047 8.47136C13.6797 8.59639 13.5101 8.66663 13.3333 8.66663H2.66666C2.48985 8.66663 2.32028 8.59639 2.19526 8.47136C2.07024 8.34634 2 8.17677 2 7.99996V2.66663C2 2.48981 2.07024 2.32025 2.19526 2.19522C2.32028 2.0702 2.48985 1.99996 2.66666 1.99996H13.3333C13.5101 1.99996 13.6797 2.0702 13.8047 2.19522C13.9298 2.32025 14 2.48981 14 2.66663V7.99996ZM8 3.33329C7.60443 3.33329 7.21775 3.45059 6.88886 3.67035C6.55996 3.89012 6.30361 4.20247 6.15224 4.56793C6.00086 4.93338 5.96126 5.33551 6.03843 5.72347C6.1156 6.11143 6.30608 6.4678 6.58578 6.74751C6.86549 7.02721 7.22185 7.21769 7.60982 7.29486C7.99778 7.37203 8.39991 7.33243 8.76536 7.18105C9.13082 7.02968 9.44317 6.77333 9.66294 6.44443C9.8827 6.11553 10 5.72885 10 5.33329C10 4.80286 9.78928 4.29415 9.41421 3.91908C9.03914 3.54401 8.53043 3.33329 8 3.33329ZM8 5.99996C7.86814 5.99996 7.73925 5.96086 7.62962 5.88761C7.51998 5.81435 7.43454 5.71023 7.38408 5.58841C7.33362 5.4666 7.32042 5.33255 7.34614 5.20323C7.37186 5.07391 7.43536 4.95512 7.52859 4.86189C7.62183 4.76865 7.74062 4.70516 7.86994 4.67944C7.99926 4.65371 8.1333 4.66691 8.25512 4.71737C8.37694 4.76783 8.48106 4.85328 8.55431 4.96291C8.62756 5.07255 8.66666 5.20144 8.66666 5.33329C8.66666 5.5101 8.59643 5.67967 8.4714 5.8047C8.34638 5.92972 8.17681 5.99996 8 5.99996ZM12 4.66663C11.8681 4.66663 11.7392 4.70573 11.6296 4.77898C11.52 4.85223 11.4345 4.95635 11.3841 5.07817C11.3336 5.19999 11.3204 5.33403 11.3461 5.46335C11.3719 5.59267 11.4354 5.71146 11.5286 5.8047C11.6218 5.89793 11.7406 5.96143 11.8699 5.98715C11.9993 6.01287 12.1333 5.99967 12.2551 5.94921C12.3769 5.89875 12.4811 5.81331 12.5543 5.70367C12.6276 5.59404 12.6667 5.46515 12.6667 5.33329C12.6667 5.15648 12.5964 4.98691 12.4714 4.86189C12.3464 4.73686 12.1768 4.66663 12 4.66663Z" fill="currentColor"></path>
            </svg>
          </div>
          <h2 class="font-semibold text-2xl text-coolGray-900 tracking-tighter">1,355</h2>
          <p class="text-xs font-medium text-coolGray-500">Total Orders</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/5 p-3">
        <div class="p-8 bg-white border border-coolGray-100 rounded-md shadow-dashboard">
          <div class="mb-4 max-w-max bg-green-100 text-green-500 p-3 rounded-md">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 10.6667H4.66668C4.48987 10.6667 4.3203 10.5965 4.19527 10.4714C4.07025 10.3464 4.00001 10.1769 4.00001 10C4.00001 9.82323 4.07025 9.65366 4.19527 9.52864C4.3203 9.40361 4.48987 9.33337 4.66668 9.33337H11.6267C12.0724 9.3334 12.5054 9.1845 12.8569 8.91033C13.2084 8.63615 13.4582 8.25241 13.5667 7.82004L14.6667 3.49337C14.6916 3.39498 14.6938 3.29218 14.673 3.19282C14.6522 3.09346 14.609 3.00016 14.5467 2.92004C14.4818 2.83786 14.3986 2.77211 14.3036 2.72809C14.2086 2.68408 14.1046 2.66305 14 2.66671H4.50668C4.36913 2.27767 4.11463 1.94071 3.77805 1.702C3.44148 1.46329 3.03931 1.33453 2.62668 1.33337H2.00001C1.8232 1.33337 1.65363 1.40361 1.52861 1.52864C1.40358 1.65366 1.33334 1.82323 1.33334 2.00004C1.33334 2.17685 1.40358 2.34642 1.52861 2.47145C1.65363 2.59647 1.8232 2.66671 2.00001 2.66671H2.62668C2.77897 2.66227 2.92818 2.71013 3.04948 2.80232C3.17078 2.8945 3.25684 3.02546 3.29334 3.17337L3.33334 3.49337L4.48668 8.00004C3.95624 8.02391 3.45702 8.25752 3.09882 8.64947C2.74063 9.04142 2.55281 9.55961 2.57668 10.09C2.60055 10.6205 2.83415 11.1197 3.2261 11.4779C3.61805 11.8361 4.13624 12.0239 4.66668 12H4.78668C4.67703 12.3021 4.6418 12.6262 4.68396 12.9448C4.72613 13.2634 4.84444 13.5671 5.02889 13.8303C5.21334 14.0934 5.45849 14.3083 5.74358 14.4566C6.02867 14.6049 6.34531 14.6824 6.66668 14.6824C6.98805 14.6824 7.30468 14.6049 7.58978 14.4566C7.87487 14.3083 8.12002 14.0934 8.30446 13.8303C8.48891 13.5671 8.60723 13.2634 8.64939 12.9448C8.69155 12.6262 8.65632 12.3021 8.54668 12H10.12C10.0104 12.3021 9.97513 12.6262 10.0173 12.9448C10.0595 13.2634 10.1778 13.5671 10.3622 13.8303C10.5467 14.0934 10.7918 14.3083 11.0769 14.4566C11.362 14.6049 11.6786 14.6824 12 14.6824C12.3214 14.6824 12.638 14.6049 12.9231 14.4566C13.2082 14.3083 13.4534 14.0934 13.6378 13.8303C13.8222 13.5671 13.9406 13.2634 13.9827 12.9448C14.0249 12.6262 13.9897 12.3021 13.88 12H14C14.1768 12 14.3464 11.9298 14.4714 11.8048C14.5964 11.6798 14.6667 11.5102 14.6667 11.3334C14.6667 11.1566 14.5964 10.987 14.4714 10.862C14.3464 10.7369 14.1768 10.6667 14 10.6667ZM13.1467 4.00004L12.2733 7.49337C12.2368 7.64129 12.1508 7.77224 12.0295 7.86443C11.9082 7.95662 11.759 8.00448 11.6067 8.00004H5.85334L4.85334 4.00004H13.1467ZM6.66668 13.3334C6.53482 13.3334 6.40593 13.2943 6.2963 13.221C6.18666 13.1478 6.10122 13.0436 6.05076 12.9218C6.0003 12.8 5.9871 12.666 6.01282 12.5366C6.03854 12.4073 6.10204 12.2885 6.19527 12.1953C6.28851 12.1021 6.4073 12.0386 6.53662 12.0129C6.66594 11.9871 6.79998 12.0003 6.9218 12.0508C7.04362 12.1012 7.14774 12.1867 7.22099 12.2963C7.29424 12.406 7.33334 12.5349 7.33334 12.6667C7.33334 12.8435 7.26311 13.0131 7.13808 13.1381C7.01306 13.2631 6.84349 13.3334 6.66668 13.3334ZM12 13.3334C11.8682 13.3334 11.7393 13.2943 11.6296 13.221C11.52 13.1478 11.4345 13.0436 11.3841 12.9218C11.3336 12.8 11.3204 12.666 11.3462 12.5366C11.3719 12.4073 11.4354 12.2885 11.5286 12.1953C11.6218 12.1021 11.7406 12.0386 11.8699 12.0129C11.9993 11.9871 12.1333 12.0003 12.2551 12.0508C12.3769 12.1012 12.4811 12.1867 12.5543 12.2963C12.6276 12.406 12.6667 12.5349 12.6667 12.6667C12.6667 12.8435 12.5964 13.0131 12.4714 13.1381C12.3464 13.2631 12.1768 13.3334 12 13.3334Z" fill="currentColor"></path>
            </svg>
          </div>
          <h2 class="font-semibold text-2xl text-coolGray-900 tracking-tighter">515</h2>
          <p class="text-xs font-medium text-coolGray-500">Total Sales</p>
        </div>

<section class="bg-white py-4">
  <div class="container px-4 mx-auto">
    <div>
      <div class="p-6 pb-0 h-full overflow-hidden bg-white rounded-t-md">
        <div class="pb-6 border-b border-coolGray-100">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-full p-2">
              <h2 class="text-coolGray-900 text-lg font-semibold">Payment method</h2>
              <p class="text-xs text-coolGray-500 font-medium">Update your billing details and address.</p>
            </div>
          </div>
        </div>
        <div class="py-6 border-b border-coolGray-100">
          <div class="w-full md:w-10/12">
            <div class="flex flex-wrap -m-3 mb-2">
              <div class="w-full md:w-1/3 p-3">
                <p class="text-sm text-coolGray-800 font-semibold">Card details</p>
              </div>
              <div class="w-full md:flex-1 p-3">
                <p class="mb-1.5 font-medium text-base text-coolGray-800">Name on card</p>
                <input class="w-full px-4 py-2.5 text-base text-coolGray-900 font-normal outline-none focus:border-green-500 border border-coolGray-200 rounded-lg shadow-input" type="text" placeholder="John Doe">
              </div>
              <div class="w-full md:w-40 p-3">
                <p class="mb-1.5 font-medium text-base text-coolGray-800">Expiry</p>

<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="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-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-18 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 text-coolGray-900 font-bold tracking-tighter leading-tight">Let&rsquo;s stay connected</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
        </div>
        <div class="w-full lg:w-auto">
          <div class="flex flex-wrap justify-center items-center md:justify-start -mb-2"><a class="inline-block py-4 px-6 mb-2 md:mb-0 w-full md:w-auto md:mr-5 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 border border-transparent rounded-md shadow-sm" href="#">Open Positions</a><a class="inline-block py-4 px-6 w-full md:w-auto text-lg leading-6 font-medium text-center text-coolGray-500 bg-white border border-coolGray-200 hover:border-coolGray-300 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 rounded-md shadow-sm" href="#">About Us</a></div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-10">
              <div class="max-w-xs mx-auto">
                <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">

<section class="py-24 md:pb-28 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-4xl mx-auto mb-16 md:mb-20 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">Features</span>
      <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter">Gain more insight into how people use your</h1>
      <p class="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>
    <div class="relative mb-8 md:mb-24 mx-auto max-w-max">
      <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
      <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
      <img src="flex-ui-assets/images/features/stock3.png" alt="">
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
          <div class="inline-flex h-16 w-16 mb-7 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
            <svg width="24" 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>
          <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Measure your performance</h3>
          <p class="text-coolGray-500 font-medium">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="mb-16 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">Team</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Our team is the best in the business.</h3>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="text-center max-w-xs mx-auto">
            <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-1 text-lg font-semibold text-white">Macauley Herring</h3>
            <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <div class="flex items-center justify-center">
              <a class="inline-block mr-5 text-coolGray-700 hover:text-coolGray-600" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: left top;">
  <div class="container px-4 mx-auto">
    <div class="mb-8 md:mb-16 md:max-w-5xl">
      <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>
    <ul class="flex flex-wrap mb-8 -mx-2 text-center">
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">All Categories</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Technology</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Development</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Marketing</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Start-up</a></li>
    </ul>
    <div class="flex flex-wrap items-center -mx-4 mb-12 md:mb-16">
      <div class="flex flex-wrap w-full xl:w-1/2 px-4 mb-8 md:-mx-4">
        <div class="w-full md:w-auto md:px-4">
          <a class="inline-block mb-6 md:mb-0 overflow-hidden rounded-md" href="#">
            <img src="flex-ui-assets/images/blog/effect3.jpg" alt="">
          </a>
        </div>
        <div class="flex flex-col justify-around w-full md:flex-1 md:px-4">
          <a class="inline-block mb-4 text-2xl 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="#">

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="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-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="md:max-w-4xl mx-auto mb-16 md:mb-20 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">Features</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <p class="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>
      <div class="relative mb-8 md:mb-24 mx-auto max-w-max">
        <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
        <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
        <img src="flex-ui-assets/images/features/stock3.png" alt="">
      </div>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-7 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="24" 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>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="max-w-3xl mb-12">
        <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 text-coolGray-900 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="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8">
          <a class="group" href="#">
            <div class="bg-white group-hover:bg-coolGray-100 rounded-md shadow-md transition duration-200">
              <div class="flex flex-wrap items-start justify-between p-10 -mx-4">
                <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
                  <h3 class="mb-3 text-lg md:text-xl text-coolGray-800 group-hover:text-coolGray-900 font-semibold transition duration-200">Front-end Developer</h3>
                  <p class="text-coolGray-500 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
                </div>
                <div class="w-full lg:w-1/3 px-4 lg:text-right">
                  <div class="inline-flex ml-auto items-center font-medium leading-6 text-green-500 group-hover:text-green-600 transition duration-200">

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="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">FAQ</span>
        <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Frequently Asked Questions</h2>
        <p class="mb-24 text-lg md:text-xl text-coolGray-400 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap w-full p-10 mb-8 text-coolGray-500 hover:text-coolGray-600 bg-coolGray-800 text-left border border-transparent hover:border-coolGray-700 rounded-md shadow-lg cursor-pointer transition duration-200" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
            <div class="flex items-center justify-between w-full">
                <h3 class="text-xl text-white font-bold">How long does it take to ship my order?</h3>
                <span class="text-primary-500 hover:text-primary-600 transition duration-200 transform cursor-pointer" x-on:click="accordion = !accordion" :class="{'rotate-0': accordion, 'rotate-180': !accordion }">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.71 8.29C12.6149 8.19896 12.5028 8.12759 12.38 8.08C12.1365 7.97998 11.8635 7.97998 11.62 8.08C11.4972 8.12759 11.3851 8.19896 11.29 8.29L8.29 11.29C8.1017 11.4783 7.99591 11.7337 7.99591 12C7.99591 12.2663 8.1017 12.5217 8.29 12.71C8.4783 12.8983 8.7337 13.0041 9 13.0041C9.2663 13.0041 9.5217 12.8983 9.71 12.71L11 11.41L11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15L13 11.41L14.29 12.71C14.383 12.8037 14.4936 12.8781 14.6154 12.9289C14.7373 12.9797 14.868 13.0058 15 13.0058C15.132 13.0058 15.2627 12.9797 15.3846 12.9289C15.5064 12.8781 15.617 12.8037 15.71 12.71C15.8037 12.617 15.8781 12.5064 15.9289 12.3846C15.9797 12.2627 16.0058 12.132 16.0058 12C16.0058 11.868 15.9797 11.7373 15.9289 11.6154C15.8781 11.4936 15.8037 11.383 15.71 11.29L12.71 8.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51808 6.3459 2.7612 8.17316C2.00433 10.0004 1.80629 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92893 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C18.1425 4.00034 17.0401 3.26375 15.8268 2.7612C14.6136 2.25865 13.3132 2 12 2ZM12 20C10.4177 20 8.87103 19.5308 7.55544 18.6518C6.23984 17.7727 5.21446 16.5233 4.60896 15.0615C4.00346 13.5997 3.84503 11.9911 4.15372 10.4393C4.4624 8.88743 5.22432 7.46196 6.34314 6.34314C7.46196 5.22432 8.88743 4.4624 10.4393 4.15371C11.9911 3.84503 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55543C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"></path>
                    </svg>
                </span>
            </div>
            <div class="overflow-hidden transition-all max-h-0 duration-500" x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''">

<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="relative py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <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-3xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</h3>
      <p class="mb-14 md:mb-24 text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Macauley Herring</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <p class="mb-4 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>

<section class="py-24 md:pb-28 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="md:max-w-4xl mx-auto mb-16 md:mb-20 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">Features</span>
      <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter">Gain more insight into how people use your</h1>
      <p class="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>
    <div class="relative mb-8 md:mb-24 mx-auto max-w-max">
      <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
      <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
      <img src="flex-ui-assets/images/features/stock3.png" alt="">
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
          <div class="inline-flex h-16 w-16 mb-7 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
            <svg width="24" 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>
          <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Measure your performance</h3>
          <p class="text-coolGray-500 font-medium">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="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-20 xl:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
        <h3 class="mb-4 text-3xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">Pricing that scales with your business immediately.</p>
      </div>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="flex flex-col pt-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
            <div class="px-8 pb-8">
              <h3 class="mb-6 text-lg md:text-xl text-coolGray-800 font-medium">Small</h3>
              <div class="mb-6">
                <span class="relative -top-10 right-1 text-3xl text-coolGray-900 font-bold">$</span>
                <span class="text-6xl md:text-7xl text-coolGray-900 font-semibold">10</span>
                <span class="inline-block ml-1 text-coolGray-500 font-semibold">per month</span>
              </div>
              <p class="mb-6 text-coolGray-400 font-medium">Basic features for up to 10 users.</p>

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

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
      <h2 class="mb-6 text-coolGray-900 text-lg font-semibold">Visitors Overview</h2>
      <div class="flex flex-wrap justify-between -m-2 mb-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5">
              <h2 class="font-semibold text-2xl text-coolGray-900">24.7k</h2>
            </div>
            <div class="w-auto p-1.5">
              <p class="flex items-center p-1 px-2 text-xs text-green-500 font-medium bg-green-100 rounded-full shadow-sm">
                <svg class="mr-0.5" width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.855 5.64499L6.355 3.14499C6.30745 3.09947 6.25138 3.06379 6.19 3.03999C6.06827 2.98998 5.93173 2.98998 5.81 3.03999C5.74863 3.06379 5.69255 3.09947 5.645 3.14499L3.145 5.64499C3.09838 5.69161 3.0614 5.74696 3.03617 5.80787C3.01094 5.86878 2.99796 5.93406 2.99796 5.99999C2.99796 6.13315 3.05085 6.26084 3.145 6.35499C3.23915 6.44915 3.36685 6.50204 3.5 6.50204C3.63315 6.50204 3.76085 6.44915 3.855 6.35499L5.5 4.70499V8.49999C5.5 8.6326 5.55268 8.75978 5.64645 8.85355C5.74022 8.94732 5.86739 8.99999 6 8.99999C6.13261 8.99999 6.25979 8.94732 6.35355 8.85355C6.44732 8.75978 6.5 8.6326 6.5 8.49999V4.70499L8.145 6.35499C8.19148 6.40186 8.24678 6.43906 8.30771 6.46444C8.36864 6.48982 8.434 6.50289 8.5 6.50289C8.56601 6.50289 8.63136 6.48982 8.69229 6.46444C8.75322 6.43906 8.80852 6.40186 8.855 6.35499C8.90186 6.30851 8.93906 6.25321 8.96445 6.19228C8.98983 6.13135 9.0029 6.066 9.0029 5.99999C9.0029 5.93399 8.98983 5.86864 8.96445 5.80771C8.93906 5.74678 8.90186 5.69148 8.855 5.64499Z" fill="#22C55E"></path>
                </svg>
                <span>23%</span>
              </p>
            </div>
          </div>
          <p class="font-medium text-xs text-coolGray-500">Unique visitors</p>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5">

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

<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="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="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="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.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-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>
    </div>
    <div class="border-b border-coolGray-100"></div>