Tailwind CSS Components

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
      <div class="w-full md:w-1/2 p-2">
        <p class="font-semibold text-xl text-coolGray-800">All Customers</p>
        <p class="font-medium text-sm text-coolGray-500">245 Customers</p>
      </div>
      <div class="w-full md:w-1/2 p-2">
        <div class="relative md:max-w-max md:ml-auto">
          <svg class="absolute left-3 transform top-1/2 -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.3699 9.5245 11.9955 9.33754 11.5916 9.26983C11.1876 9.20211 10.7727 9.25673 10.4001 9.42667L9.80008 8.82667C10.5071 7.88194 10.83 6.70445 10.7038 5.53122C10.5775 4.358 10.0115 3.27615 9.1197 2.50347C8.22787 1.73078 7.07643 1.32464 5.89718 1.36679C4.71794 1.40894 3.59844 1.89626 2.76405 2.73065C1.92967 3.56503 1.44235 4.68453 1.4002 5.86378C1.35805 7.04302 1.76419 8.19446 2.53687 9.08629C3.30956 9.97812 4.3914 10.5441 5.56463 10.6704C6.73786 10.7966 7.91535 10.4737 8.86007 9.76667L9.45341 10.36C9.26347 10.7331 9.1954 11.1564 9.25879 11.5702C9.32218 11.984 9.51383 12.3675 9.80674 12.6667L11.2201 14.08C11.5951 14.4545 12.1034 14.6649 12.6334 14.6649C13.1634 14.6649 13.6717 14.4545 14.0467 14.08C14.2372 13.8937 14.3886 13.6713 14.4919 13.4257C14.5953 13.1802 14.6485 12.9164 14.6485 12.65C14.6485 12.3836 14.5953 12.1198 14.4919 11.8743C14.3886 11.6287 14.2372 11.4063 14.0467 11.22ZM8.39341 8.39333C7.9269 8.85866 7.33294 9.1753 6.68657 9.30323C6.0402 9.43117 5.37041 9.36466 4.76181 9.11212C4.15321 8.85958 3.63312 8.43234 3.26722 7.88436C2.90132 7.33638 2.70603 6.69224 2.70603 6.03333C2.70603 5.37442 2.90132 4.73029 3.26722 4.18231C3.63312 3.63433 4.15321 3.20708 4.76181 2.95454C5.37041 2.702 6.0402 2.6355 6.68657 2.76343C7.33294 2.89137 7.9269 3.208 8.39341 3.67333C8.70383 3.98297 8.95012 4.35081 9.11816 4.75577C9.2862 5.16074 9.3727 5.59488 9.3727 6.03333C9.3727 6.47178 9.2862 6.90592 9.11816 7.31089C8.95012 7.71586 8.70383 8.08369 8.39341 8.39333ZM13.1067 13.1067C13.0448 13.1692 12.971 13.2187 12.8898 13.2526C12.8086 13.2864 12.7214 13.3039 12.6334 13.3039C12.5454 13.3039 12.4583 13.2864 12.377 13.2526C12.2958 13.2187 12.2221 13.1692 12.1601 13.1067L10.7467 11.6933C10.6843 11.6314 10.6347 11.5576 10.6008 11.4764C10.567 11.3951 10.5495 11.308 10.5495 11.22C10.5495 11.132 10.567 11.0449 10.6008 10.9636C10.6347 10.8824 10.6843 10.8086 10.7467 10.7467C10.8087 10.6842 10.8825 10.6346 10.9637 10.6007C11.0449 10.5669 11.1321 10.5495 11.2201 10.5495C11.3081 10.5495 11.3952 10.5669 11.4765 10.6007C11.5577 10.6346 11.6314 10.6842 11.6934 10.7467L13.1067 12.16C13.1692 12.222 13.2188 12.2957 13.2527 12.3769C13.2865 12.4582 13.3039 12.5453 13.3039 12.6333C13.3039 12.7213 13.2865 12.8085 13.2527 12.8897C13.2188 12.971 13.1692 13.0447 13.1067 13.1067Z" fill="#BBC3CF"></path>
          </svg>
          <input class="w-full md:w-64 pl-8 pr-4 py-2 text-sm text-coolGray-400 font-medium outline-none focus:border-green-500 border border-coolGray-200 rounded-lg shadow-input" type="text" placeholder="Search">
        </div>
      </div>
    </div>
    <div class="mb-6 border border-coolGray-100"></div>
    <div class="overflow-hidden border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="overflow-x-auto">
        <table class="w-full">
          <tr class="whitespace-nowrap h-11 bg-coolGray-50 bg-opacity-80 border-b border-coolGray-100">
            <th class="px-4 font-semibold text-xs text-coolGray-500 uppercase text-left">
              <div class="flex items-center">
                <input class="mr-3 w-4 h-4 bg-white rounded" type="checkbox">

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

All Customers Table with Search

A customer management table titled All Customers showing 245 customers in rows with checkboxes, avatars, name and email, location, order count, last order, total spent, and refunds columns. A search input sits at the top right, and each row ends with a row action menu.

AI Tables Component Generator

Tailwind Component #3122

<section 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>
            <a class="inline-block py-4 px-7 mb-4 w-full text-base md:text-lg leading-6 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 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-7 w-full text-coolGray-500 font-medium text-center bg-coolGray-50 hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-100 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Learn more</a>
          </div>
          <div class="border-b border-coolGray-100"></div>
          <ul class="self-start px-8 pt-8">
            <li class="flex items-center mb-3 text-coolGray-500 font-medium">
              <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.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 #3123

<section class="py-20 xl: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="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-white font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <p class="mb-12 text-lg md:text-xl text-coolGray-400 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>
            <a class="inline-block py-4 px-7 mb-4 w-full text-base md:text-lg leading-6 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 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-7 w-full text-coolGray-500 font-medium text-center bg-coolGray-50 hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-100 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Learn more</a>
          </div>
          <div class="border-b border-coolGray-100"></div>
          <ul class="self-start px-8 pt-8">
            <li class="flex items-center mb-3 text-coolGray-500 font-medium">
              <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.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 #3124

<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="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-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Our team is the best in the business.</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-400 font-medium">Highly professional and capable of running your business across all digital channels.</p>
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">Open Positions</a></div>
          <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">About Us</a></div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
          <div class="h-full py-8 px-10 bg-white rounded-md text-center">
            <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-2 text-2xl md:text-3xl leading-tight font-semibold">Macauley Herring</h3>
            <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <p class="mb-8 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</p>

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 Team Component Generator

Tailwind Component #3125

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

AI Features Component Generator

Tailwind Component #3126

<section class="relative py-24 bg-coolGray-50">
  <div class="absolute top-0 left-0 w-full h-full" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: left top;"></div>
  <div class="container relative z-10 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-darkCoolGray-900 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-500 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-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 -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>

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

<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="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-900 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-white font-bold tracking-tighter">Lorem ipsum dolor sit amet</h2>
      <p class="mb-10 text-lg md:text-xl font-medium text-coolGray-400">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-white">John Doe</h4>
          <p class="text-base md:text-lg text-coolGray-400">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 #3128

<section class="relative py-24 bg-white">
  <div class="absolute top-0 left-0 w-full h-full" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-repeat: no-repeat; background-position: left top;"></div>
  <div class="container relative z-10 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-darkCoolGray-900 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-500 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-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 -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>

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

<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">
    <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-coolGray-50 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>
            <a class="inline-block py-4 px-7 mb-4 w-full text-base md:text-lg leading-6 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 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-7 w-full text-coolGray-500 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-100 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Learn more</a>
          </div>
          <div class="border-b border-coolGray-100"></div>
          <ul class="self-start px-8 pt-8">
            <li class="flex items-center mb-3 text-coolGray-500 font-medium">
              <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.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 #3130

<section class="overflow-hidden">
  <div>
    <div class="px-8 py-6 xl:py-0 bg-coolGray-900 border-b border-coolGray-100">
      <div class="flex items-center justify-between -m-2">
        <div class="flex flex-wrap items-center w-auto p-2">
          <a class="block max-w-max xl:mr-14" href="#">
            <img src="flex-ui-assets/logos/dashboard/flex-ui-green.svg" alt="">
          </a>
          <ul class="hidden xl:flex flex-wrap">
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" fill="currentColor"></path>
                </svg>
                <p class="text-white">Dashboard</p>
              </a>
            </li>
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.50003 8.86L11.5 14.06C11.6521 14.1478 11.8245 14.194 12 14.194C12.1756 14.194 12.348 14.1478 12.5 14.06L21.5 8.86C21.6512 8.77275 21.7768 8.64746 21.8646 8.49659C21.9523 8.34572 21.999 8.17452 22 8C22.0007 7.82379 21.9549 7.65053 21.8671 7.49775C21.7792 7.34497 21.6526 7.21811 21.5 7.13L12.5 1.94C12.348 1.85224 12.1756 1.80603 12 1.80603C11.8245 1.80603 11.6521 1.85224 11.5 1.94L2.50003 7.13C2.34743 7.21811 2.22081 7.34497 2.13301 7.49775C2.04521 7.65053 1.99933 7.82379 2.00003 8C2.00108 8.17452 2.04779 8.34572 2.13551 8.49659C2.22322 8.64746 2.34889 8.77275 2.50003 8.86ZM12 4L19 8L12 12L5.00003 8L12 4ZM20.5 11.17L12 16L3.50003 11.13C3.3859 11.0639 3.25981 11.021 3.12903 11.0038C2.99825 10.9866 2.86537 10.9955 2.73803 11.0299C2.61069 11.0643 2.49141 11.1235 2.38706 11.2042C2.28271 11.2849 2.19536 11.3854 2.13003 11.5C1.99966 11.7296 1.96539 12.0015 2.03471 12.2563C2.10403 12.5111 2.2713 12.7281 2.50003 12.86L11.5 18.06C11.6521 18.1478 11.8245 18.194 12 18.194C12.1756 18.194 12.348 18.1478 12.5 18.06L21.5 12.86C21.7288 12.7281 21.896 12.5111 21.9654 12.2563C22.0347 12.0015 22.0004 11.7296 21.87 11.5C21.8047 11.3854 21.7173 11.2849 21.613 11.2042C21.5087 11.1235 21.3894 11.0643 21.262 11.0299C21.1347 10.9955 21.0018 10.9866 20.871 11.0038C20.7402 11.021 20.6142 11.0639 20.5 11.13V11.17ZM20.5 15.17L12 20L3.50003 15.13C3.3859 15.0639 3.25981 15.021 3.12903 15.0038C2.99825 14.9866 2.86537 14.9955 2.73803 15.0299C2.61069 15.0643 2.49141 15.1235 2.38706 15.2042C2.28271 15.2849 2.19536 15.3854 2.13003 15.5C1.99966 15.7296 1.96539 16.0015 2.03471 16.2563C2.10403 16.5111 2.2713 16.7281 2.50003 16.86L11.5 22.06C11.6521 22.1478 11.8245 22.194 12 22.194C12.1756 22.194 12.348 22.1478 12.5 22.06L21.5 16.86C21.7288 16.7281 21.896 16.5111 21.9654 16.2563C22.0347 16.0015 22.0004 15.7296 21.87 15.5C21.8047 15.3854 21.7173 15.2849 21.613 15.2042C21.5087 15.1235 21.3894 15.0643 21.262 15.0299C21.1347 14.9955 21.0018 14.9866 20.871 15.0038C20.7402 15.021 20.6142 15.0639 20.5 15.13V15.17Z" fill="currentColor"></path>
                </svg>
                <p class="text-white">Projects</p>
              </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

AI Navigation (horizontal) Component Generator

Tailwind Component #3131

<section class="py-16 md:py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.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 #3132

<section class="bg-white py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 h-full overflow-hidden bg-white rounded-md">
      <div class="pb-6 border-b border-coolGray-100">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-full md:w-auto p-2">
            <h2 class="text-coolGray-900 text-lg font-semibold">Personal info</h2>
            <p class="text-xs text-coolGray-500 font-medium">Lorem ipsum dolor sit amet</p>
          </div>
          <div class="w-full md:w-auto p-2">
            <div class="flex flex-wrap justify-between -m-1.5">
              <div class="w-full md:w-auto p-1.5">
                <button class="flex flex-wrap justify-center w-full px-4 py-2 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button">
                  <p>Cancel</p>
                </button>
              </div>
              <div class="w-full md:w-auto p-1.5">
                <button class="flex flex-wrap justify-center w-full px-4 py-2 bg-green-500 hover:bg-green-600 font-medium text-sm text-white border border-green-500 rounded-md shadow-button">
                  <p>Save</p>
                </button>
              </div>
            </div>
          </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

Personal info account settings form

A settings form for editing personal profile details including name, email, photo upload, role, country, timezone, domain fields, and bio. It uses a left label column with right-aligned input fields and Cancel and Save actions in the header.

AI Forms Component Generator

Tailwind Component #3133

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

AI Features Component Generator

Tailwind Component #3134

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

<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 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
        <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Frequently Asked Questions</h2>
        <p class="mb-24 text-lg md:text-xl text-coolGray-400 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="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-coolGray-800 group-hover:bg-coolGray-700 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-coolGray-800 group-hover:bg-coolGray-700 rounded-full transition duration-200">
                <div class="inline-flex items-center justify-center w-12 h-12 text-coolGray-800 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>

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

<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-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 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' : ''">

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

<section class="py-20 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap 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

AI Contact Component Generator

Tailwind Component #3138

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-20 xl:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-white bg-green-500 font-medium uppercase rounded-9xl">Pricing</span>
        <h3 class="mb-4 text-3xl md:text-5xl text-white font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-400 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

Tailwind Component #3139

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="p-8 bg-white border border-coolGray-100 rounded-md shadow-dashboard">
          <div class="flex flex-wrap items-end justify-between -m-2 mb-2">
            <div class="w-auto p-2">
              <h3 class="text-sm text-coolGray-500 font-medium">Todays revenue</h3>
            </div>
            <div class="w-auto p-2">
              <a href="#">
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 6.66666C7.73629 6.66666 7.47851 6.74486 7.25924 6.89137C7.03998 7.03788 6.86908 7.24612 6.76816 7.48975C6.66724 7.73339 6.64084 8.00148 6.69229 8.26012C6.74373 8.51876 6.87072 8.75634 7.05719 8.94281C7.24366 9.12928 7.48124 9.25626 7.73988 9.30771C7.99852 9.35916 8.26661 9.33275 8.51025 9.23184C8.75388 9.13092 8.96212 8.96002 9.10863 8.74076C9.25514 8.52149 9.33333 8.26371 9.33333 8C9.33333 7.64638 9.19286 7.30724 8.94281 7.05719C8.69276 6.80714 8.35362 6.66666 8 6.66666ZM3.33333 6.66666C3.06963 6.66666 2.81184 6.74486 2.59257 6.89137C2.37331 7.03788 2.20241 7.24612 2.10149 7.48975C2.00058 7.73339 1.97417 8.00148 2.02562 8.26012C2.07707 8.51876 2.20405 8.75634 2.39052 8.94281C2.57699 9.12928 2.81457 9.25626 3.07321 9.30771C3.33185 9.35916 3.59994 9.33275 3.84358 9.23184C4.08721 9.13092 4.29545 8.96002 4.44196 8.74076C4.58847 8.52149 4.66667 8.26371 4.66667 8C4.66667 7.64638 4.52619 7.30724 4.27614 7.05719C4.02609 6.80714 3.68696 6.66666 3.33333 6.66666ZM12.6667 6.66666C12.403 6.66666 12.1452 6.74486 11.9259 6.89137C11.7066 7.03788 11.5357 7.24612 11.4348 7.48975C11.3339 7.73339 11.3075 8.00148 11.359 8.26012C11.4104 8.51876 11.5374 8.75634 11.7239 8.94281C11.9103 9.12928 12.1479 9.25626 12.4065 9.30771C12.6652 9.35916 12.9333 9.33275 13.1769 9.23184C13.4205 9.13092 13.6288 8.96002 13.7753 8.74076C13.9218 8.52149 14 8.26371 14 8C14 7.64638 13.8595 7.30724 13.6095 7.05719C13.3594 6.80714 13.0203 6.66666 12.6667 6.66666Z" fill="#D5DAE1"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="flex flex-wrap items-center justify-between -m-1">
            <div class="w-auto p-1">
              <h2 class="font-medium text-3xl text-black tracking-tighter">$4,540</h2>
            </div>
            <div class="w-auto p-1">
              <div class="flex items-center px-2 py-1 text-green-500 font-medium text-xs bg-green-100 rounded-full shadow-sm">
                <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/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

AI Stats Component Generator

Tailwind Component #3140