UI Components – Flex Library

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: left top;">
  <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 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>
        <p class="mb-4 text-base md:text-lg text-coolGray-400 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>
        <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="">

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="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="mb-8 text-lg md:text-xl text-coolGray-400 font-medium">Highly professional and capable of running your business across all digital channels.</p>
      <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 class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
        <div class="h-full py-8 px-10 bg-white rounded-md text-center">
          <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
          <h3 class="mb-2 text-2xl md:text-3xl leading-tight font-semibold">Macauley Herring</h3>
          <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
          <p class="mb-8 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</p>
          <div class="flex items-center justify-center">
            <a class="inline-block mr-6 hover:opacity-80" href="#">
              <img src="flex-ui-assets/brands/facebook.svg" alt="">
            </a>
            <a class="inline-block hover:opacity-80" href="#">
              <img src="flex-ui-assets/brands/twitter.svg" alt="">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="bg-white border border-coolGray-100 shadow-dashboard rounded-md">
          <div class="flex flex-wrap justify-between items-center p-6 pb-4 -m-2 border-b border-coolGray-100">
            <div class="w-full lg:w-auto p-2">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <img src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
                  <h3 class="text-xs font-medium text-coolGray-400">UI/UX Designer</h3>
                </div>
              </div>
            </div>
            <div class="w-full lg:w-auto p-2">
              <button class="flex flex-wrap justify-center w-full px-4 py-2 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">
                <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.16666 15H7.69999C7.80966 15.0006 7.91838 14.9796 8.01991 14.9381C8.12144 14.8967 8.21379 14.8356 8.29166 14.7583L14.0583 8.98333L16.425 6.66667C16.5031 6.5892 16.5651 6.49703 16.6074 6.39548C16.6497 6.29393 16.6715 6.18501 16.6715 6.075C16.6715 5.96499 16.6497 5.85607 16.6074 5.75452C16.5651 5.65297 16.5031 5.5608 16.425 5.48333L12.8917 1.90833C12.8142 1.83023 12.722 1.76823 12.6205 1.72592C12.5189 1.68362 12.41 1.66183 12.3 1.66183C12.19 1.66183 12.0811 1.68362 11.9795 1.72592C11.878 1.76823 11.7858 1.83023 11.7083 1.90833L9.35832 4.26667L3.57499 10.0417C3.49776 10.1195 3.43665 10.2119 3.39518 10.3134C3.35371 10.4149 3.33269 10.5237 3.33332 10.6333V14.1667C3.33332 14.3877 3.42112 14.5996 3.5774 14.7559C3.73368 14.9122 3.94564 15 4.16666 15ZM12.3 3.675L14.6583 6.03333L13.475 7.21667L11.1167 4.85833L12.3 3.675ZM4.99999 10.975L9.94166 6.03333L12.3 8.39167L7.35832 13.3333H4.99999V10.975ZM17.5 16.6667H2.49999C2.27898 16.6667 2.06701 16.7545 1.91073 16.9107C1.75445 17.067 1.66666 17.279 1.66666 17.5C1.66666 17.721 1.75445 17.933 1.91073 18.0893C2.06701 18.2455 2.27898 18.3333 2.49999 18.3333H17.5C17.721 18.3333 17.933 18.2455 18.0892 18.0893C18.2455 17.933 18.3333 17.721 18.3333 17.5C18.3333 17.279 18.2455 17.067 18.0892 16.9107C17.933 16.7545 17.721 16.6667 17.5 16.6667Z" fill="#D5DAE1"></path>
                </svg>
                <p>Edit</p>
              </button>

<section class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="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-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</h3>
      <p class="mb-8 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 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 class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
        <div class="h-full py-8 px-10 bg-white rounded-md text-center">
          <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
          <h3 class="mb-2 text-2xl md:text-3xl leading-tight font-semibold">Macauley Herring</h3>
          <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
          <p class="mb-8 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</p>
          <div class="flex items-center justify-center">
            <a class="inline-block mr-6 hover:opacity-80" href="#">
              <img src="flex-ui-assets/brands/facebook.svg" alt="">
            </a>
            <a class="inline-block hover:opacity-80" href="#">
              <img src="flex-ui-assets/brands/twitter.svg" alt="">

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-20 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 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="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>
      <div class="w-full md:w-1/2 px-4">
        <div class="flex flex-wrap w-full mb-10 text-left cursor-pointer" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
          <div class="flex items-center justify-between w-full pb-4">
              <h3 class="text-xl text-white font-bold">How long does it take to ship my order?</h3>
              <span class="text-green-500 transition duration-200 transform" 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 text-coolGray-400 font-medium" x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''">Orders are usually shipped within 1-2 business days after placing the order.</div>
        </div>
        <div class="flex flex-wrap w-full mb-10 text-left cursor-pointer" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
          <div class="flex items-center justify-between w-full pb-4">

<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="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="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 md:w-1/2 px-4 mb-16 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-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="w-full md:w-1/2 px-4">
        <a class="block p-10 mb-8 bg-white hover:bg-coolGray-100 border border-transparent hover:border-coolGray-200 rounded-md shadow-md transition duration-200" href="#">
          <span class="inline-block py-px px-2 mb-2 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Software Development</span>
          <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-semibold">Front-end Developer</h3>
          <p class="mb-4 max-w-sm text-coolGray-500 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
          <div class="inline-flex mr-6 items-center">
            <svg class="text-coolGray-300" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="currentColor"></path>
            </svg>
            <span class="ml-2 text-coolGray-500 font-medium">Remote friendly</span>
          </div>
          <div class="inline-flex items-center">
            <svg class="text-coolGray-300" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.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 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"></path>
            </svg>
            <span class="ml-2 text-coolGray-500 font-medium">Full-time</span>

<section class="py-20 xl:pt-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-300">Trusted by the top companies in this industry</h3>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <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/resecurb-logo.svg" alt="">
        </div>
      </div>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
      <div class="relative max-w-max">
        <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
        <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook.png" alt="">
        <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
        <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
        <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
      </div>
    </div>
    <div class="container px-4 mx-auto">
      <div class="md:w-1/2 md:ml-auto 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">

<section class="wave-top wave-bottom overflow-hidden">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-20 lg:mb-0">
          <div class="max-w-md mx-auto">
            <h2 class="mb-8 text-4xl md:text-5xl font-heading font-bold text-white md:leading-15">Join 6,000+ startups growing with Flex</h2>
            <ul class="mb-8">
              <li class="flex items-center mb-4">
                <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
                <span class="text-lg md:text-xl font-heading text-coolGray-400">Mauris pellentesque congue libero nec</span>
              </li>
              <li class="flex items-center mb-4">
                <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
                <span class="text-lg md:text-xl font-heading text-coolGray-400">Suspendisse mollis tincidunt</span>
              </li>
              <li class="flex items-center">
                <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
                <span class="text-lg md:text-xl font-heading text-coolGray-400">Praesent varius justo vel justo pulvinar</span>

<section class="py-20 xl:pt-24 xl:pb-32 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="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-coolGray-900 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-500 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-coolGray-900 font-bold tracking-tighter">235.000</h2>
          <p class="text-lg md:text-xl text-coolGray-500 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-coolGray-900 font-bold tracking-tighter">$10m</h2>
          <p class="text-lg md:text-xl text-coolGray-500 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-coolGray-900 font-bold tracking-tighter">+50.000</h2>
          <p class="text-lg md:text-xl text-coolGray-500 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-coolGray-900 font-bold tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Unique Users</p>
        </div>
      </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="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="pt-20 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="max-w-4xl 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-9xl">Contact</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">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="flex flex-wrap -mx-4 pb-16">
        <div class="w-full md:w-1/3 px-4 mb-10 md:mb-0">
          <div class="max-w-xs mx-auto text-center">
            <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
              <svg class="h-6 text-coolGray-800" 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>
            <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-white font-bold">Email</h3>
            <a class="text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>
          </div>

<section class="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
    <div class="relative max-w-max">
      <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
      <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook.png" alt="">
      <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
      <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
      <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="md:w-1/2 md:ml-auto 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">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="pt-6 bg-white overflow-hidden border border-coolGray-100 rounded-md shadow-dashboard">
      <h2 class="px-6 mb-4 text-lg text-coolGray-900 font-semibold">Top products</h2>
      <div class="px-6 overflow-x-auto">
        <table class="w-full">
          <tr class="whitespace-nowrap h-11 bg-coolGray-50 bg-opacity-80">
            <th class="px-4 font-semibold text-xs text-coolGray-500 uppercase text-left rounded-l-md">
              <p>Product</p>
            </th>
            <th class="whitespace-nowrap px-4 font-semibold text-xs text-coolGray-500 uppercase text-center">Category</th><th class="whitespace-nowrap px-4 font-semibold text-xs text-coolGray-500 uppercase text-center">Impressions</th><th class="whitespace-nowrap px-4 font-semibold text-xs text-coolGray-500 uppercase text-center">Top country</th><th class="whitespace-nowrap px-4 font-semibold text-xs text-coolGray-500 uppercase text-center">Cr</th><th class="whitespace-nowrap px-4 font-semibold text-xs text-coolGray-500 uppercase text-center rounded-r-md">Value</th>
          </tr>
          <tr class="h-18 border-b border-coolGray-100">
            <th class="whitespace-nowrap px-4 bg-white text-left">
              <div class="flex items-center -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center justify-center w-10 h-10 text-base font-medium bg-green-500 rounded-md">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M22 10.94C21.9896 10.8481 21.9695 10.7576 21.94 10.67V10.58C21.8919 10.4772 21.8278 10.3827 21.75 10.3L15.75 4.3C15.6673 4.22222 15.5728 4.15808 15.47 4.11H15.37C15.2728 4.058 15.1683 4.02092 15.06 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V11C22 11 22 11 22 10.94ZM16 7.41L18.59 10H17C16.7348 10 16.4804 9.89464 16.2929 9.70711C16.1054 9.51957 16 9.26522 16 9V7.41ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H14V9C14 9.79565 14.3161 10.5587 14.8787 11.1213C15.4413 11.6839 16.2044 12 17 12H20V17ZM7 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11C12 10.7348 11.8946 10.4804 11.7071 10.2929C11.5196 10.1054 11.2652 10 11 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 12ZM7 14C6.73478 14 6.48043 14.1054 6.29289 14.2929C6.10536 14.4804 6 14.7348 6 15C6 15.2652 6.10536 15.5196 6.29289 15.7071C6.48043 15.8946 6.73478 16 7 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15C18 14.7348 17.8946 14.4804 17.7071 14.2929C17.5196 14.1054 17.2652 14 17 14H7Z" fill="#EBF3FE"></path>
                    </svg>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <p class="text-sm font-medium text-coolGray-800">Coding course</p>

<section class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: left top;">
  <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-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Blog</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 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-500 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 leading-tight text-coolGray-800 hover:text-coolGray-900 font-bold hover:underline" href="#">A small business is only as good as its tools and it is totally true.</a>
        <p class="mb-4 text-base md:text-lg text-coolGray-400 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>
        <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="">

<div class="fixed top-0 left-0 w-full h-full px-4 py-16 md:py-24 bg-coolGray-900 bg-opacity-50 overflow-y-auto">
  <div class="max-w-4xl p-6 sm:p-10 mx-auto bg-coolGray-50 rounded-lg">
    <form action="">
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Name</label>
          <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="Your Name">
        </div>
        <div class="w-full md:w-1/2 px-4">
          <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Email</label>
          <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="email" placeholder="Your Email">
        </div>
      </div>
      <div class="mb-8">
        <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Name</label>
        <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="Product Name">
      </div>
      <div class="mb-8">
        <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Description</label>
        <textarea class="block h-40 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 resize-none" type="text" placeholder="Product description"></textarea>
      </div>
      <div class="mb-8">
        <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Upload files</label>
        <div class="flex p-6 items-center justify-center border-dashed border-2 h-52 border-coolGray-200 rounded-lg text-coolGray-300">

<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 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="xl:max-w-4xl mb-12 mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight 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="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 lg:pt-6 mb-8 lg:mb-0">
          <div class="p-8 lg:mb-6 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 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">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>

<section class="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
    <div class="relative max-w-max">
      <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
      <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook2.png" alt="">
      <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
      <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
      <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="md:w-1/2 md:ml-auto 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">

<section 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">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="flex flex-col pt-8 pb-8 h-full bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
          <div class="px-8 text-center">
            <h3 class="mb-2 text-3xl md:text-4xl text-coolGray-800 font-semibold tracking-tighter">Small</h3>
            <p class="mb-6 text-coolGray-400 font-medium">For Individual Users</p>
            <div class="mb-6">

<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-1/4 lg:w-auto px-4">
          <a class="block mb-5 md:mb-0 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-full md:w-3/4 lg:flex-1 px-4">
          <div class="flex flex-wrap justify-end -mx-3 lg:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 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:py-0 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:py-0 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:py-0 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:py-0 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:py-0 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:py-0 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>