Tailwind CSS Components

<section class="relative bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <img class="md:hidden w-full" src="flex-ui-assets/images/http-codes/dog-error-side.png" alt="">
  <img class="absolute top-0 left-0 hidden md:block h-full w-2/5 md:object-cover" src="flex-ui-assets/images/http-codes/dog-error-side.png" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap py-16 md:py-40 lg:py-72">
      <div class="w-full md:w-1/2 ml-auto text-center md:text-left">
        <div class="md:max-w-xl">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Error 404</span>
          <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
          <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
          <div class="flex flex-wrap">
            <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">Go back to Homepage</a></div>
            <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="absolute right-6 top-6 hidden md:block w-24 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
  <img class="absolute right-0 bottom-0 w-24 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
</section>

<section class="py-20 xl:py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <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 text-lg md:text-xl text-coolGray-500 font-medium max-w-3xl">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 items-center -mx-4 text-center">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <div class="flex flex-wrap justify-center -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">235.000</h2>
            <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-bold">Projects completed</h3>
            <p class="text-coolGray-500 font-medium">No need to hire specialists for each channel.</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">$10m</h2>
            <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-bold">APR</h3>
            <p class="text-coolGray-500 font-medium">Track how much money a company just in case</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">+50.000</h2>
            <h3 class="mb-2 text-lg lg:text-xl text-coolGray-800 font-bold">Hours Saved Annually</h3>
            <p class="text-coolGray-500 font-medium">Manage many companies, even with different languages.</p>
          </div>
          <div class="w-full md:w-1/2 px-4">

<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="py-16 md:py-24 bg-coolGray-50" 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 px-4 mb-10">
          <div class="flex flex-wrap justify-between items-center">
            <div class="w-full md:w-1/2 mb-10 md:mb-0">
              <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Rich text</span>
              <h3 class="mb-4 text-3xl md:text-4xl text-white font-bold tracking-tighter">Beautiful tool that helps you</h3>
              <p class="text-lg md:text-xl leading-8 text-coolGray-400 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
            </div>
            <div class="w-full md:w-auto">
              <div class="flex flex-wrap justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-white bg-coolGray-700 hover:bg-coolGray-600 rounded-md" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>

<section class="py-24 md:py-32 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-sm mx-auto">
      <div class="mb-6 text-center">
        <a class="inline-block mb-6" href="#">
          <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
        </a>
        <h3 class="mb-4 text-2xl md:text-3xl font-bold">Join our community</h3>
        <p class="text-lg text-coolGray-500 font-medium">Start your journey with our product</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 text-coolGray-800 font-medium" for="">Name*</label>
          <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="Patryk">
        </div>
        <div class="mb-6">
          <label class="block mb-2 text-coolGray-800 font-medium" for="">Email*</label>
          <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="dev@shuffle.dev">
        </div>
        <div class="mb-4">
          <label class="block mb-2 text-coolGray-800 font-medium" for="">Password*</label>
          <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
        </div>
        <div class="flex flex-wrap items-center justify-between mb-6">

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <section class="py-20 xl:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="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">Numbers</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter">We believe in the power of data</h3>
      <p class="mb-16 xl:mb-24 text-lg md:text-xl text-coolGray-400 font-medium max-w-3xl">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 items-center -mx-4 text-center">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="flex flex-wrap justify-center -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">235.000</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-200 font-bold">Projects completed</h3>
              <p class="text-coolGray-400 font-medium">No need to hire specialists for each channel.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">$10m</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-200 font-bold">APR</h3>
              <p class="text-coolGray-400 font-medium">Track how much money a company just in case</p>
            </div>

<section x-data="{ current: 0 }" class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
        <div x-show="current === 0">
            <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
              <img class="absolute top-0 left-0" src="flex-ui-assets/elements/testimonials/quote-top-green.svg" alt="">
              <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.svg" alt="">
              <div class="relative">
                <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
                <h2 class="text-2xl md:text-5xl font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
              </div>
            </div>
            <div class="text-center mb-8">
              <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/testimonials/avatar1.png" alt="">
              <h3 class="mb-2 text-xl md:text-2xl font-semibold">Darren Dunlap</h3>
              <span class="text-lg text-coolGray-500 font-medium">CEO &amp; Founder at Flex.co</span>
            </div>
          </div>
          <div x-show="current === 1">

<section class="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="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">Application</span>
      <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Get our Free Mobile App</h3>
      <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-2xl">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 justify-center mb-16">
        <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-4">
          <img class="mx-auto" src="flex-ui-assets/elements/app-store-dark.svg" alt="">
        </div>
        <div class="w-full md:w-auto">
          <img class="mx-auto" src="flex-ui-assets/elements/google-play-dark.svg" alt="">
        </div>
      </div>
      <div class="flex flex-row items-end mx-auto max-w-max">
        <div class="relative">
          <img class="mx-auto h-64 md:h-auto object-cover" src="flex-ui-assets/elements/applications/iphone-light-half1.png" alt="">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-56 md:h-auto mt-2 md:mt-3 -ml-1 object-cover" src="flex-ui-assets/elements/applications/iphone-half-ui1.png" alt="">
        </div>
        <div class="relative z-10 hidden md:block md:-ml-24">
          <img class="mx-auto" src="flex-ui-assets/elements/applications/iphone-light-half2.png" alt="">
          <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-4 -ml-1" src="flex-ui-assets/elements/applications/iphone-half-ui2.png" alt="">
        </div>
        <div class="relative hidden md:block md:-ml-24">

<section class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4 mb-16">
      <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-md">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
          <h3 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Meet our team</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
        </div>
      </div>
      <div class="w-full md:w-auto px-4">
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">We are hiring</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="#">Our Culture</a></div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="relative max-w-max">
          <img class="w-full" src="flex-ui-assets/images/teams/photo-men.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-6 md:pl-10 md:pb-10">
            <h3 class="mb-2 text-2xl md:text-3xl leading-tight text-white font-semibold">Macauley Herring</h3>
            <span class="text-lg font-medium text-green-500 leading-7">CEO &amp; Founder</span>

<section class="py-20 xl:pt-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <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-white font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
      <p class="text-lg md:text-xl text-coolGray-400 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-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-dark.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-dark.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo-dark.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 x-data="{ mobileNavOpen: false }" class="bg-coolGray-900">
  <nav class="flex justify-between p-6 px-4">
    <div class="flex justify-between items-center w-full">
      <div class="hidden xl:flex w-1/3">
        <ul class="flex w-full">
          <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
          <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
          <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
          <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
        </ul>
      </div>
      <div class="w-auto xl:w-1/3">
        <a class="flex xl:justify-center max-w-max mx-auto" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
        </a>
      </div>
      <div class="hidden xl:block w-1/2 xl:w-1/3">
        <div class="flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
      </div>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
      <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect class="text-coolGray-800" 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>

<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-white" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 mb-16 md: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">How it works</span>
          <h2 class="mb-6 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h2>
          <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="w-full md:w-1/2 px-4">
          <div class="relative mx-auto md:mr-0 max-w-max overflow-hidden rounded-7xl">
            <img src="flex-ui-assets/images/how-it-works/placeholder-video.png" alt="">
            <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
              <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
            </video>
            <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full" href="#">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.5 11.13L5.50001 3.05C5.34799 2.96223 5.17554 2.91603 5.00001 2.91603C4.82447 2.91603 4.65203 2.96223 4.50001 3.05C4.3474 3.1381 4.22079 3.26497 4.13299 3.41775C4.04518 3.57052 3.99931 3.74379 4.00001 3.92V20.08C3.99931 20.2562 4.04518 20.4295 4.13299 20.5823C4.22079 20.735 4.3474 20.8619 4.50001 20.95C4.65203 21.0378 4.82447 21.084 5.00001 21.084C5.17554 21.084 5.34799 21.0378 5.50001 20.95L19.5 12.87C19.6539 12.7828 19.7819 12.6563 19.871 12.5035C19.96 12.3506 20.007 12.1769 20.007 12C20.007 11.8231 19.96 11.6494 19.871 11.4965C19.7819 11.3437 19.6539 11.2172 19.5 11.13ZM6.00001 18.35V5.65L17 12L6.00001 18.35Z" fill="white"></path>
              </svg>

<section class="relative pt-16 pb-0 md:py-32 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto mb-16">
    <div class="w-full md:w-3/5 lg:w-1/2">
      <div class="max-w-sm mx-auto">
        <div class="mb-6 text-center">
          <a class="inline-block mb-6" href="#">
            <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
          </a>
          <h3 class="mb-4 text-2xl md:text-3xl font-bold">Join our community</h3>
          <p class="text-lg text-coolGray-500 font-medium">Start your journey with our product</p>
        </div>
        <form action="">
          <div class="mb-6">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Name*</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="Patryk">
          </div>
          <div class="mb-6">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Email*</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="dev@shuffle.dev">
          </div>
          <div class="mb-4">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Password*</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
          </div>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="relative py-10 px-14 mx-auto bg-coolGray-900 rounded-md overflow-hidden">
      <img class="absolute z-10 left-4 top-4" src="flex-ui-assets/elements/dashboard/banners/dots-purple.svg" alt="">
      <img class="absolute z-10 right-4 bottom-4" src="flex-ui-assets/elements/dashboard/banners/dots-red.svg" alt="">
      <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="flex-ui-assets/elements/dashboard/banners/wave-shadow.svg" alt="">
      <div class="relative z-10 text-center">
        <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Ideal banner asset for your dashboard project</h2>
        <button class="block mx-auto px-4 py-3 font-medium text-base text-white bg-green-500 hover:bg-green-600 rounded-md">Get Started</button>
      </div>
    </div>
  </div>
</section>

<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-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-10 md:mb-0">
          <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Sign up for our newsletter</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="mx-auto md:mr-0 md:max-w-md">
            <div class="flex flex-wrap mb-1">
              <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
              </div>
              <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
            </div>
            <span class="text-xs text-coolGray-500 font-medium">
              <span>We care about your data in our</span>
              <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>

<section class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-repeat: no-repeat; background-position: center top;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center mb-12 -mx-4">
      <div class="w-full md:w-1/2 2xl:w-5/12 px-4 mb-8 md:mb-0">
        <div class="mx-auto md:ml-0 max-w-max overflow-hidden rounded-lg">
          <img src="flex-ui-assets/images/blog-content/content-photo4.jpg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="inline-block py-1 px-3 mb-6 text-xs leading-5 text-green-900 font-medium uppercase bg-green-100 rounded-full shadow-sm">Technology</div>
        <div class="flex items-center">
          <p class="inline-block text-green-500 font-medium">John Doe</p>
          <span class="mx-1 text-green-500">&bull;</span>
          <p class="inline-block text-green-500 font-medium">19 Jan 2022</p>
        </div>
        <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight text-white font-bold tracking-tighter">How to collaborate better with your Development team?</h2>
        <p class="mb-8 md:mb-12 text-lg md:text-xl font-medium text-coolGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center -mx-2">
          <div class="w-auto px-2">
            <img src="flex-ui-assets/images/blog/avatar.png" alt="">
          </div>
          <div class="w-auto px-2">
            <h4 class="text-base md:text-lg font-bold text-white">John Doe</h4>
            <p class="text-base md:text-lg text-coolGray-400">12 October 2021</p>

<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="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-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.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="">
      </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>

<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-light1.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-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
        <p class="mb-24 text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16">
          <div class="group h-full">
            <div class="group relative h-full px-8 pt-16 pb-8 bg-white group-hover:bg-coolGray-50 rounded-md shadow-md hover:shadow-xl transition duration-200">
              <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex h-16 w-16 items-center justify-center bg-white group-hover:bg-coolGray-50 rounded-full transition duration-200">
                <div class="inline-flex items-center justify-center w-12 h-12 text-white bg-green-500 rounded-full">
                  <svg width="16" height="20" viewbox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.29001 12.66C7.10526 12.8462 7.00111 13.0976 7.00001 13.36C7.00026 13.494 7.02747 13.6266 7.08001 13.75C7.17028 13.9619 7.33093 14.1361 7.53482 14.2433C7.73872 14.3504 7.97334 14.3839 8.19907 14.338C8.42479 14.2922 8.62776 14.1698 8.77369 13.9916C8.91963 13.8134 8.99957 13.5903 9.00001 13.36C8.9989 13.0976 8.89475 12.8462 8.71001 12.66C8.61704 12.5662 8.50644 12.4918 8.38458 12.4411C8.26272 12.3903 8.13202 12.3642 8.00001 12.3642C7.86799 12.3642 7.73729 12.3903 7.61543 12.4411C7.49357 12.4918 7.38297 12.5662 7.29001 12.66ZM15.63 1.65995C15.5138 1.56597 15.3781 1.49923 15.2327 1.46461C15.0873 1.43 14.9361 1.42841 14.79 1.45995C13.7214 1.6839 12.6183 1.68675 11.5486 1.46834C10.4789 1.24992 9.46525 0.814866 8.57001 0.189952C8.40261 0.0738247 8.20374 0.0115967 8.00001 0.0115967C7.79627 0.0115967 7.5974 0.0738247 7.43001 0.189952C6.53401 0.813153 5.51998 1.24643 4.45029 1.46312C3.38061 1.6798 2.2779 1.67532 1.21001 1.44995C1.06394 1.41841 0.912671 1.42 0.767306 1.45461C0.621942 1.48923 0.486181 1.55597 0.370006 1.64995C0.253985 1.74407 0.160527 1.86299 0.0964981 1.99797C0.0324695 2.13295 -0.00050219 2.28056 5.78149e-06 2.42995V9.87995C-0.000883255 11.3137 0.340779 12.7269 0.996541 14.0019C1.6523 15.2769 2.60319 16.3768 3.77001 17.21L7.42001 19.81C7.58937 19.9305 7.7921 19.9953 8.00001 19.9953C8.20791 19.9953 8.41064 19.9305 8.58001 19.81L12.23 17.21C13.3968 16.3768 14.3477 15.2769 15.0035 14.0019C15.6592 12.7269 16.0009 11.3137 16 9.87995V2.42995C16.0005 2.28056 15.9675 2.13295 15.9035 1.99797C15.8395 1.86299 15.746 1.74407 15.63 1.64995V1.65995ZM14 9.87995C14.0008 10.9947 13.7353 12.0935 13.2257 13.085C12.716 14.0764 11.977 14.9318 11.07 15.58L8.00001 17.77L4.93001 15.58C4.02304 14.9318 3.28399 14.0764 2.77435 13.085C2.26472 12.0935 1.99924 10.9947 2.00001 9.87995V3.57995C4.09643 3.75939 6.19605 3.27297 8.00001 2.18995C9.80397 3.27297 11.9036 3.75939 14 3.57995V9.87995ZM8.00001 5.35995C7.47307 5.35961 6.95534 5.49807 6.49891 5.76139C6.04249 6.02472 5.66347 6.40361 5.40001 6.85995C5.28045 7.08849 5.25383 7.35439 5.32569 7.6021C5.39755 7.84981 5.56234 8.06017 5.78565 8.18925C6.00895 8.31832 6.27348 8.35613 6.524 8.29476C6.77452 8.2334 6.99164 8.07762 7.13001 7.85995C7.21769 7.70808 7.34377 7.58194 7.4956 7.49418C7.64743 7.40642 7.81967 7.36013 7.99504 7.35996C8.17041 7.35979 8.34274 7.40573 8.49474 7.49319C8.64674 7.58065 8.77307 7.70654 8.86106 7.85824C8.94904 8.00994 8.99559 8.18211 8.99602 8.35748C8.99646 8.53284 8.95077 8.70524 8.86354 8.85738C8.77631 9.00951 8.6506 9.13603 8.49904 9.22424C8.34747 9.31245 8.17537 9.35925 8.00001 9.35995C7.73479 9.35995 7.48044 9.46531 7.2929 9.65285C7.10536 9.84038 7.00001 10.0947 7.00001 10.36C7.00001 10.6252 7.10536 10.8795 7.2929 11.0671C7.48044 11.2546 7.73479 11.36 8.00001 11.36C8.79566 11.36 9.55872 11.0439 10.1213 10.4813C10.6839 9.91866 11 9.1556 11 8.35995C11 7.5643 10.6839 6.80124 10.1213 6.23863C9.55872 5.67602 8.79566 5.35995 8.00001 5.35995Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>

<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="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-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>
    <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-400 hover:text-green-500 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-400 hover:text-green-500 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-400 hover:text-green-500 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-400 hover:text-green-500 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-400 hover:text-green-500 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-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>
          <a class="inline-flex items-center text-base md:text-lg text-green-500 hover:text-green-600 font-semibold" href="#">

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-repeat: no-repeat; 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-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>
    <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-400 hover:text-green-500 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-400 hover:text-green-500 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-400 hover:text-green-500 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-400 hover:text-green-500 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-400 hover:text-green-500 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-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>
          <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">
  <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-3xl mb-12">
        <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">We are hiring</span>
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium text-white font-bold tracking-tighter">Join our team</h3>
        <p class="text-lg md:text-xl text-coolGray-400 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-coolGray-800 group-hover:bg-coolGray-700 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-white group-hover:text-coolGray-100 font-semibold transition duration-200">Front-end Developer</h3>
                  <p class="text-coolGray-400 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">