Tailwind CSS Components

<section class="bg-white p-8">
  <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
      <ul class="flex flex-wrap items-center gap-x-3 mb-2">
        <li>
          <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">
            <svg class="mr-2" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.3334 5.33334L9.3334 1.82667C8.96671 1.4987 8.49202 1.31738 8.00006 1.31738C7.50811 1.31738 7.03341 1.4987 6.66673 1.82667L2.66673 5.33334C2.45498 5.52272 2.286 5.75504 2.17104 6.01483C2.05609 6.27463 1.9978 6.55592 2.00006 6.84V12.6667C2.00006 13.1971 2.21078 13.7058 2.58585 14.0809C2.96092 14.456 3.46963 14.6667 4.00006 14.6667H12.0001C12.5305 14.6667 13.0392 14.456 13.4143 14.0809C13.7894 13.7058 14.0001 13.1971 14.0001 12.6667V6.83334C14.0014 6.55038 13.9426 6.27036 13.8277 6.01179C13.7128 5.75322 13.5443 5.52197 13.3334 5.33334ZM9.3334 13.3333H6.66673V10C6.66673 9.82319 6.73697 9.65362 6.86199 9.5286C6.98702 9.40357 7.15659 9.33334 7.3334 9.33334H8.66673C8.84354 9.33334 9.01311 9.40357 9.13813 9.5286C9.26316 9.65362 9.3334 9.82319 9.3334 10V13.3333ZM12.6667 12.6667C12.6667 12.8435 12.5965 13.0131 12.4715 13.1381C12.3464 13.2631 12.1769 13.3333 12.0001 13.3333H10.6667V10C10.6667 9.46957 10.456 8.96086 10.0809 8.58579C9.70587 8.21072 9.19716 8 8.66673 8H7.3334C6.80296 8 6.29426 8.21072 5.91918 8.58579C5.54411 8.96086 5.3334 9.46957 5.3334 10V13.3333H4.00006C3.82325 13.3333 3.65368 13.2631 3.52866 13.1381C3.40363 13.0131 3.3334 12.8435 3.3334 12.6667V6.83334C3.33352 6.73868 3.35379 6.64513 3.39287 6.55892C3.43196 6.47271 3.48895 6.39581 3.56006 6.33334L7.56006 2.83334C7.68172 2.72646 7.83812 2.66751 8.00006 2.66751C8.162 2.66751 8.3184 2.72646 8.44006 2.83334L12.4401 6.33334C12.5112 6.39581 12.5682 6.47271 12.6073 6.55892C12.6463 6.64513 12.6666 6.73868 12.6667 6.83334V12.6667Z" fill="#BBC3CF"></path>
            </svg>
            <p>Home</p>
          </a>
        </li>
        <li>
          <svg width="6" height="15" viewbox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
          </svg>
        </li>
        <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Products</a></li>
        <li>
          <svg width="6" height="15" viewbox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
          </svg>
        </li>
        <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Lorem Ipsum</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navbar Component Generator

Tailwind Component #3142

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #3143

<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="max-w-3xl mb-12">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
      <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium text-coolGray-900 font-bold tracking-tighter">Join our team</h3>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="group" href="#">
          <div class="bg-white group-hover:bg-coolGray-100 rounded-md shadow-md transition duration-200">
            <div class="flex flex-wrap items-start justify-between p-10 -mx-4">
              <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
                <h3 class="mb-3 text-lg md:text-xl text-coolGray-800 group-hover:text-coolGray-900 font-semibold transition duration-200">Front-end Developer</h3>
                <p class="text-coolGray-500 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
              </div>
              <div class="w-full lg:w-1/3 px-4 lg:text-right">
                <div class="inline-flex ml-auto items-center font-medium leading-6 text-green-500 group-hover:text-green-600 transition duration-200">
                  <span class="mr-2">View Job</span>
                  <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86346 13.92 9.62C13.8724 9.49725 13.801 9.3851 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.4783 8.99591 6.7337 8.99591 7C8.99591 7.2663 9.1017 7.5217 9.29 7.71L10.59 9L7 9C6.73479 9 6.48043 9.10536 6.2929 9.29289C6.10536 9.48043 6 9.73478 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11L10.59 11L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51808 13.8268 0.761204C11.9996 0.00432792 9.98891 -0.193706 8.0491 0.192146C6.10929 0.577999 4.32746 1.53041 2.92894 2.92893C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433294 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C17.9997 16.1425 18.7363 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10ZM2 10C2 8.41775 2.4692 6.87103 3.34825 5.55544C4.2273 4.23985 5.47673 3.21446 6.93854 2.60896C8.40035 2.00346 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3144

<section class="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="relative container px-4 mx-auto">
    <div class="mb-16 text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Our team is the best in the business.</h3>
      <p class="text-lg md:text-xl text-coolGray-400 font-medium">Highly professional and capable of running your business across all digital channels.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
        <div class="text-center max-w-xs mx-auto">
          <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
          <h3 class="mb-1 text-lg font-semibold text-white">Macauley Herring</h3>
          <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
          <div class="flex items-center justify-center">
            <a class="inline-block mr-5 text-coolGray-700 hover:text-coolGray-600" href="#">
              <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-5 text-coolGray-700 hover:text-coolGray-600" href="#">
              <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
              </svg>
            </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3145

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mb-12">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
      <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium text-coolGray-900 font-bold tracking-tighter">Join our team</h3>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="group" href="#">
          <div class="bg-coolGray-50 group-hover:bg-coolGray-100 rounded-md shadow-md transition duration-200">
            <div class="flex flex-wrap items-start justify-between p-10 -mx-4">
              <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
                <h3 class="mb-3 text-lg md:text-xl text-coolGray-800 group-hover:text-coolGray-900 font-semibold transition duration-200">Front-end Developer</h3>
                <p class="text-coolGray-500 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
              </div>
              <div class="w-full lg:w-1/3 px-4 lg:text-right">
                <div class="inline-flex ml-auto items-center font-medium leading-6 text-green-500 group-hover:text-green-600 transition duration-200">
                  <span class="mr-2">View Job</span>
                  <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86346 13.92 9.62C13.8724 9.49725 13.801 9.3851 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.4783 8.99591 6.7337 8.99591 7C8.99591 7.2663 9.1017 7.5217 9.29 7.71L10.59 9L7 9C6.73479 9 6.48043 9.10536 6.2929 9.29289C6.10536 9.48043 6 9.73478 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11L10.59 11L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51808 13.8268 0.761204C11.9996 0.00432792 9.98891 -0.193706 8.0491 0.192146C6.10929 0.577999 4.32746 1.53041 2.92894 2.92893C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433294 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C17.9997 16.1425 18.7363 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10ZM2 10C2 8.41775 2.4692 6.87103 3.34825 5.55544C4.2273 4.23985 5.47673 3.21446 6.93854 2.60896C8.40035 2.00346 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3146

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3147

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3148

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #3149

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3150

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #3151

<section class="py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: center top;">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-2xl mx-auto mb-12 text-center">
      <div class="inline-block py-1 px-3 mb-6 text-xs leading-5 text-green-500 font-medium uppercase bg-green-100 rounded-full shadow-sm">Technology</div>
      <div class="flex items-center justify-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-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Lorem ipsum dolor sit amet</h2>
      <p class="mb-10 text-lg md:text-xl font-medium text-coolGray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-center text-left -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-coolGray-800">John Doe</h4>
          <p class="text-base md:text-lg text-coolGray-500">12 October 2021</p>
        </div>
      </div>
    </div>
  </div>
  <img class="w-full mb-10 mx-auto" src="flex-ui-assets/images/blog-content/content-photo3.jpg" alt="">
  <div class="container px-4 mx-auto">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #3152

<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="relative container px-4 mx-auto">
    <div class="mb-16 text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</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 class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
        <div class="text-center max-w-xs mx-auto">
          <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
          <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Macauley Herring</h3>
          <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
          <div class="flex items-center justify-center">
            <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
              <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
              <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
              </svg>
            </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3153

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3154

<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="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="max-w-3xl mx-auto">
      <div class="flex flex-wrap w-full p-10 mb-8 text-coolGray-300 hover:text-coolGray-400 bg-white text-left border border-transparent hover:border-coolGray-200 rounded-md shadow-lg transition duration-200 cursor-pointer" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
        <div class="flex items-center justify-between w-full">
            <h3 class="text-xl text-coolGray-900 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" x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''">
          <p class="text-coolGray-500 font-medium mt-4">Orders are usually shipped within 1-2 business days after placing the order.</p>
        </div>
      </div>
      <div class="flex flex-wrap w-full p-10 mb-8 text-coolGray-300 hover:text-coolGray-400 bg-white text-left border border-transparent hover:border-coolGray-200 rounded-md shadow-lg transition duration-200 cursor-pointer" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
        <div class="flex items-center justify-between w-full">
            <h3 class="text-xl text-coolGray-900 font-bold">What payment methods do you accept?</h3>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #3155

<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="max-w-3xl mb-12">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium text-coolGray-900 font-bold tracking-tighter">Join our team</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8">
          <a class="group" href="#">
            <div class="bg-white group-hover:bg-coolGray-100 rounded-md shadow-md transition duration-200">
              <div class="flex flex-wrap items-start justify-between p-10 -mx-4">
                <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
                  <h3 class="mb-3 text-lg md:text-xl text-coolGray-800 group-hover:text-coolGray-900 font-semibold transition duration-200">Front-end Developer</h3>
                  <p class="text-coolGray-500 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
                </div>
                <div class="w-full lg:w-1/3 px-4 lg:text-right">
                  <div class="inline-flex ml-auto items-center font-medium leading-6 text-green-500 group-hover:text-green-600 transition duration-200">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3156

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #3157

<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="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">
                  <span class="mr-2">View Job</span>
                  <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86346 13.92 9.62C13.8724 9.49725 13.801 9.3851 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.4783 8.99591 6.7337 8.99591 7C8.99591 7.2663 9.1017 7.5217 9.29 7.71L10.59 9L7 9C6.73479 9 6.48043 9.10536 6.2929 9.29289C6.10536 9.48043 6 9.73478 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11L10.59 11L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51808 13.8268 0.761204C11.9996 0.00432792 9.98891 -0.193706 8.0491 0.192146C6.10929 0.577999 4.32746 1.53041 2.92894 2.92893C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433294 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C17.9997 16.1425 18.7363 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10ZM2 10C2 8.41775 2.4692 6.87103 3.34825 5.55544C4.2273 4.23985 5.47673 3.21446 6.93854 2.60896C8.40035 2.00346 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3158

<section class="py-20 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap mb-24 lg:mb-18 justify-between items-center">
      <div class="w-full lg:w-1/2 mb-10 lg:mb-0">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Contact</span>
        <h3 class="mb-4 text-4xl md:text-5xl text-darkCoolGray-900 font-bold tracking-tighter leading-tight">Let&rsquo;s stay connected</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
      </div>
      <div class="w-full lg:w-auto">
        <div class="flex flex-wrap justify-center items-center md:justify-start -mb-2"><a class="inline-block py-4 px-6 mb-2 md:mb-0 w-full md:w-auto md:mr-5 text-lg leading-6 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Open Positions</a><a class="inline-block py-4 px-6 w-full md:w-auto text-lg leading-6 font-medium text-center text-coolGray-500 bg-white border border-coolGray-200 hover:border-coolGray-300 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 rounded-md shadow-sm" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs mx-auto">
              <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
                <svg class="h-6 text-white" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
                </svg>
              </div>
              <h3 class="mb-4 text-2xl md:text-3xl font-bold leading-9 text-coolGray-900">Email</h3>
              <a class="text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #3159

<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-8 md: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-white font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</h3>
      <p class="mb-10 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 class="relative mx-auto md:w-80">
        <img class="absolute top-1/2 left-4 transform -translate-y-1/2" src="flex-ui-assets/elements/blog/search.svg" alt="">
        <input class="w-full py-3 pl-12 pr-4 text-coolGray-900 leading-tight placeholder-coolGray-500 border border-coolGray-200 rounded-lg shadow-xsm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="Search">
      </div>
    </div>
    <ul class="flex flex-wrap mb-8 -mx-2 text-center">
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">All Categories</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Technology</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Development</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Marketing</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 text-sm text-coolGray-600 hover:text-green-900 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Start-up</a></li>
    </ul>
    <div class="flex flex-wrap -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>
        <div class="mb-4"><a class="inline-block py-1 px-3 text-xs leading-5 text-green-900 font-medium uppercase bg-green-100 hover:bg-green-200 rounded-full shadow-sm" href="#">Technology</a></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #3160

<section class="relative py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="relative container px-4 mx-auto">
    <div class="mb-16 text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</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 class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
        <div class="text-center max-w-xs mx-auto">
          <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
          <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Macauley Herring</h3>
          <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
          <div class="flex items-center justify-center">
            <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
              <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
              <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
              </svg>
            </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in