Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #3621

Tailwind CSS

Flex

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <section class="py-20 xl:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Numbers</span>
          <h3 class="mb-12 text-4xl md:text-5xl text-white font-bold tracking-tighter">We believe in numbers</h3>
          <div class="flex flex-wrap justify-center -mx-4 text-center">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">235.000</h2>
              <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</h3>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">$10m</h2>
              <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">APR</h3>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
              <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">+50.000</h2>
              <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</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 Stats Component Generator

Tailwind Component #3622

Tailwind CSS

Flex

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

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 Logo clouds Component Generator

Tailwind Component #3623

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <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-16 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 leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
        </div>
        <div class="w-full lg:w-auto"><a class="inline-block py-4 px-6 w-full md:w-auto 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 rounded-md shadow-sm" href="#">Send Message</a></div>
      </div>
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="flex mb-18">
            <div class="inline-flex mr-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>

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

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 md:pb-32 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 mb-8 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium font-bold tracking-tighter">Join our team</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      </div>
      <div class="mx-auto max-w-6xl">
        <div class="flex flex-wrap items-center justify-center mb-14 -mx-3">
          <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
            <div class="relative">
              <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 h-full py-3 pl-12 pr-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Search">
            </div>
          </div>
          <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
            <div class="relative bg-white border border-coolGray-200 rounded-lg shadow-md">
              <svg class="absolute top-1/2 transform -translate-y-1/2 right-0 mr-5" width="12" height="8" viewbox="0 0 12 8" 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 Careers Component Generator

Tailwind Component #3625

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
      <div class="relative max-w-max">
        <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
        <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook2.png" alt="">
        <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
        <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
        <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
      </div>
    </div>
    <div class="container px-4 mx-auto">
      <div class="md:w-1/2 md:ml-auto pl-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
        <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Great work starts with your app</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
        <div class="flex flex-wrap mb-10 text-center md:text-left">
          <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
            <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-coolGray-900 bg-green-500 rounded-lg">

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

Tailwind Component #3626

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-900 overflow-hidden" 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 lg:items-center pt-24 pb-12 -mx-4">
        <div class="w-full md:w-1/4 lg:w-auto px-4">
          <a class="block mb-5 md:mb-0 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
        </div>
        <div class="w-full md:w-3/4 lg:flex-1 px-4">
          <div class="flex flex-wrap justify-end -mx-3 lg:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Product</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Resources</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Careers</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Help</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Privacy</a></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 Footers Component Generator

Tailwind Component #3627

Tailwind CSS

Flex

<section>
  <div class="py-16 md:py-24 bg-coolGray-50 border-b border-b-2 border-green-500" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-repeat: no-repeat; background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-5xl">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Blog</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-8 md:pt-16 pb-16 md:pb-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/4 px-4">
          <div class="relative mb-5">
            <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 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>
          <span class="inline-block mb-4 md:pl-4 text-sm text-coolGray-500 uppercase font-semibold">Categories</span>
          <ul class="md:flex lg:flex-col mb-8 text-center md:text-left">
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">All Categories</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Development</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Marketing</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Technology</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 Blog Component Generator

Tailwind Component #3628

Tailwind CSS

Flex

<section>
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md: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="mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">Open Positions</a></div>
          <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">About Us</a></div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
          <div class="h-full py-8 px-10 bg-white rounded-md text-center">
            <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-2 text-2xl md:text-3xl leading-tight font-semibold">Macauley Herring</h3>
            <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <p class="mb-8 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</p>

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

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0">
          <div class="max-w-md">
            <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
            <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
            <p class="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>
        <div class="w-full md:w-1/2 px-4">
            <div class="flex flex-wrap w-full mb-10 text-left cursor-pointer" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
              <div class="flex items-center justify-between w-full pb-4">
                <h3 class="text-xl text-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>

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

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-20 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap mb-24 lg:mb-16 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 leading-tight text-white font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
        </div>
        <div class="w-full lg:w-auto"><a class="inline-block py-4 px-6 w-full md:w-auto 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 rounded-md shadow-sm" href="#">Send Message</a></div>
      </div>
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="flex mb-18">
            <div class="inline-flex mr-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
              <svg class="h-6 text-coolGray-800" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
              </svg>
            </div>

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

Tailwind CSS

Flex

<section class="overflow-hidden min-h-full">
  <div class="relative z-50 flex items-center justify-between xl:hidden bg-coolGray-50 px-8 py-5 -mx-3">
    <div class="w-auto px-3">
      <a class="block max-w-max" href="#">
        <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
      </a>
    </div>
    <div class="w-auto px-3">
      <button class="navbar-burger self-center ml-auto block xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-100" width="32" height="32" rx="6" fill="currentColor"></rect>
          <path class="text-coolGray-400" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="navbar-menu z-50 fixed top-0 hidden flex xl:flex flex-col justify-between bg-coolGray-50 w-24 h-full overflow-y-auto">
    <div class="navbar-backdrop fixed xl:hidden inset-0 bg-coolGray-900 opacity-60"></div>
    <div class="relative bg-coolGray-50">
      <a class="fixed z-50 flex justify-center w-24 p-6 bg-coolGray-50 mx-auto" href="#">
        <img src="flex-ui-assets/logos/dashboard/flex-ui-wave-green.svg" alt="">
      </a>
      <ul class="mb-10 pt-24">
        <li class="mb-4">

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

Tailwind CSS

Flex

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

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

Tailwind CSS

Flex

<section>
  <div class="py-16 md:py-24 bg-white border-b border-b-2 border-green-500">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-5xl">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Blog</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-8 md:pt-16 pb-16 md:pb-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: top center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/4 px-4">
          <div class="relative mb-6">
            <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 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>
          <span class="inline-block mb-4 md:pl-4 text-sm text-coolGray-500 uppercase font-semibold">Categories</span>
          <ul class="md:flex lg:flex-col mb-8 text-center md:text-left">
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">All Categories</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Development</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Marketing</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Technology</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 Blog Component Generator

Tailwind Component #3634

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 md:pb-32 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 mb-8 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-medium 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="mx-auto max-w-6xl">
        <div class="flex flex-wrap items-center justify-center mb-14 -mx-3">
          <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
            <div class="relative">
              <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 h-full py-3 pl-12 pr-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Search">
            </div>
          </div>
          <div class="w-full md:w-1/3 px-3 mb-3 md:mb-0">
            <div class="relative bg-white border border-coolGray-200 rounded-lg shadow-md">
              <svg class="absolute top-1/2 transform -translate-y-1/2 right-0 mr-5" width="12" height="8" viewbox="0 0 12 8" 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 Careers Component Generator

Tailwind Component #3635

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
      <div class="relative max-w-max">
        <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
        <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook.png" alt="">
        <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
        <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
        <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
      </div>
    </div>
    <div class="container px-4 mx-auto">
      <div class="md:w-1/2 md:ml-auto pl-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
        <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Great work starts with your app</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
        <div class="flex flex-wrap mb-10 text-center md:text-left">
          <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
            <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">

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

Tailwind Component #3636

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 pb-4 border border-coolGray-100 bg-white rounded-md shadow-dashboard">
      <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
        <div class="w-auto p-2">
          <h2 class="text-lg font-semibold">Team members</h2>
        </div>
        <div class="w-auto p-2"><a class="text-sm text-green-500 hover:text-green-600 font-semibold" href="#">See all</a></div>
      </div>
      <div class="flex flex-wrap">
        <div class="w-full border-b border-coolGray-100">
          <div class="flex flex-wrap items-center justify-between py-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <img src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
                  <h3 class="text-xs font-medium text-coolGray-400">UI/UX Designer</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">

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

Tailwind Component #3637

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
        <div class="w-full md:w-1/4 lg:w-auto px-4">
          <a class="block mb-5 md:mb-0 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-full md:w-3/4 lg:flex-1 px-4">
          <div class="flex flex-wrap justify-end -mx-3 lg:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Product</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Resources</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
          </div>

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

Tailwind Component #3638

Tailwind CSS

Flex

<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 md:py-32 bg-coolGray-50 overflow-hidden" 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 lg:items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="relative mx-auto md:ml-0 max-w-max">
            <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img src="flex-ui-assets/images/features/stock2.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
          <h1 class="mb-8 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Gain more insight into how people use your</h1>
          <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <a class="inline-block py-4 px-5 w-full md:w-auto text-base leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a>
        </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

AI Features Component Generator

Tailwind Component #3639

Tailwind CSS

Flex

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

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 Logo clouds Component Generator

Tailwind Component #3640

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-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">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
        <h2 class="mb-4 text-4xl md:text-5xl text-white leading-tight font-semibold tracking-tighter">Testimonial from Flex app users</h2>
        <p class="text-xl font-medium text-coolGray-400">With Flex, you can build websites without writing code.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
            <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
            <h4 class="mb-1 text-lg font-semibold">Macauley Herring</h4>
            <p class="text-lg text-coolGray-400">CEO &amp; Founder at Flex.co</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
            <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</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 Testimonials Component Generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Tailwind Component #3621

Get the code for 13,400+ components

Tailwind Component #3622

Get the code for 13,400+ components

Tailwind Component #3623

Get the code for 13,400+ components

Tailwind Component #3624

Get the code for 13,400+ components

Tailwind Component #3625

Get the code for 13,400+ components

Tailwind Component #3626

Get the code for 13,400+ components

Tailwind Component #3627

Get the code for 13,400+ components

Tailwind Component #3628

Get the code for 13,400+ components

Tailwind Component #3629

Get the code for 13,400+ components

Tailwind Component #3630

Get the code for 13,400+ components

Tailwind Component #3631

Get the code for 13,400+ components

Tailwind Component #3632

Get the code for 13,400+ components

Tailwind Component #3633

Get the code for 13,400+ components

Tailwind Component #3634

Get the code for 13,400+ components

Tailwind Component #3635

Get the code for 13,400+ components

Tailwind Component #3636

Get the code for 13,400+ components

Tailwind Component #3637

Get the code for 13,400+ components

Tailwind Component #3638

Get the code for 13,400+ components

Tailwind Component #3639

Get the code for 13,400+ components

Tailwind Component #3640

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support