Tailwind Components in Flex library

Framework

UI Library

Components

Tailwind Component #101

Tailwind CSS

Flex

<section x-data="{ current: 0 }" class="py-24 md:pb-28 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div x-show="current === 0">
        <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
          <img class="absolute top-0 left-0" src="flex-ui-assets/elements/testimonials/quote-top-dark.svg" alt="">
          <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-dark.svg" alt="">
          <div class="relative">
            <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
            <h2 class="text-2xl md:text-5xl text-white font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
          </div>
        </div>
        <div class="text-center mb-8">
          <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/testimonials/avatar1.png" alt="">
          <h3 class="mb-2 text-xl md:text-2xl text-white font-semibold">Darren Dunlap</h3>
          <span class="text-lg text-coolGray-600 font-medium">CEO &amp; Founder at Flex.co</span>
        </div>
    </div>
    <div x-show="current === 1">
        <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
          <img class="absolute top-0 left-0" src="flex-ui-assets/elements/testimonials/quote-top-dark.svg" alt="">
          <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-dark.svg" alt="">
          <div class="relative">
            <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
            <h2 class="text-2xl md:text-5xl text-white font-semibold tracking-tighter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h2>

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

Tailwind CSS

Flex

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 mx-auto w-full bg-coolGray-50 max-w-6xl border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <p class="mb-4 text-coolGray-500 font-medium">We use third-party cookies in order to personalise your experience</p>
          <a class="flex items-center font-medium text-green-500 hover:text-green-600" href="#">
            <span class="mr-2">Read our cookie policy</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="flex flex-wrap justify-end">
            <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-3 px-5 w-full leading-5 text-coolGray-800 bg-white hover:bg-coolGray-100 font-medium text-center focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">Decline</a></div>
            <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Allow</a></div>
          </div>
        </div>
      </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

Cookie consent banner with Decline and Allow buttons

A full-width light gray notice displaying a cookie consent message with a green cookie policy link on the left and Decline and Allow action buttons on the right. The layout is a single horizontal row used to collect user consent for third-party cookies.

Tailwind Component #103

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 bg-white border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="mb-0.5 font-medium text-sm text-coolGray-900">Notification success!</h3>
              <p class="font-medium text-sm text-coolGray-600">Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
        </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.93999 8L13.14 3.80667C13.2655 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2655 2.98554 13.14 2.86C13.0145 2.73446 12.8442 2.66394 12.6667 2.66394C12.4891 2.66394 12.3189 2.73446 12.1933 2.86L8 7.06L3.80666 2.86C3.68113 2.73446 3.51086 2.66394 3.33333 2.66394C3.15579 2.66394 2.98553 2.73446 2.85999 2.86C2.73446 2.98554 2.66393 3.1558 2.66393 3.33333C2.66393 3.51087 2.73446 3.68113 2.85999 3.80667L7.06 8L2.85999 12.1933C2.79751 12.2553 2.74791 12.329 2.71407 12.4103C2.68022 12.4915 2.6628 12.5787 2.6628 12.6667C2.6628 12.7547 2.68022 12.8418 2.71407 12.9231C2.74791 13.0043 2.79751 13.078 2.85999 13.14C2.92197 13.2025 2.9957 13.2521 3.07694 13.2859C3.15818 13.3198 3.24532 13.3372 3.33333 13.3372C3.42134 13.3372 3.50847 13.3198 3.58971 13.2859C3.67095 13.2521 3.74469 13.2025 3.80666 13.14L8 8.94L12.1933 13.14C12.2553 13.2025 12.329 13.2521 12.4103 13.2859C12.4915 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8418 13.3198 12.923 13.2859C13.0043 13.2521 13.078 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.2859 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.2859 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.93999 8Z" fill="#8896AB"></path>
            </svg>
          </a>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Success Notification Banner with Dismiss Button

A horizontal white notification banner showing a green checkmark, bold 'Notification success!' heading, and supporting text 'Lorem ipsum dolor sit amet.' with a close (X) icon on the right. It conveys a successful status message in a single row.

Tailwind Component #104

Tailwind CSS

Flex

<section x-data="{ mobileNavOpen: false }" class="bg-coolGray-900">
  <nav class="flex justify-between p-6 px-4">
    <div class="flex justify-between items-center w-full">
      <div class="xl:w-1/3">
        <a class="block max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
        </a>
      </div>
      <div class="hidden xl:block xl:w-1/3">
        <ul class="flex justify-center">
          <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
          <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
          <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
          <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="hidden xl:block xl:w-1/3">
        <div class="flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
      </div>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
      <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect class="text-coolGray-800" width="32" height="32" rx="6" fill="currentColor"></rect>
        <path class="text-coolGray-400" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>

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

Tailwind CSS

Flex

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

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

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 xl:pb-28 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">
    <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 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 items-center pt-10 px-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
          <span class="inline-block py-px px-2 mb-6 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
          <h3 class="mb-4 text-lg md:text-xl text-green-500 font-medium">Basic Plan</h3>
          <div class="mb-4">
            <span class="relative -top-6 right-1 text-2xl text-coolGray-900 font-medium">$</span>
            <span class="text-5xl text-coolGray-900 font-medium">10</span>
            <span class="text-3xl text-coolGray-900 font-medium">/mo</span>
          </div>
          <p class="mb-7 text-lg md:text-xl text-coolGray-400 font-medium">Billed annually</p>
          <ul class="self-start mb-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">
              <span>Complete documentation</span>
            </li>
            <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">
              <span>Working materials in Figma</span>

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

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

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

FAQ Section with Three-Column Question Card Grid

A light-themed FAQ section with a centered heading, subtitle, and a 3x3 grid of white cards, each with a green shield-question icon, a bold question, and a short answer about shipping and payment. The layout is a centered header above a repeated card grid.

Tailwind Component #108

Tailwind CSS

Flex

<section class="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="pt-24 pb-11 mx-auto max-w-4xl">
      <a class="block md:mx-auto mb-5 max-w-max" href="#">
        <svg class="text-green-500" width="95" height="32" viewbox="0 0 95 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path class="text-coolGray-900" d="M54.3157 6.71125V10.2982H46.8277V14.1731H52.4306V17.6552H46.8277V25.0909H42.3506V6.71125H54.3157Z" fill="currentColor"></path>
          <path class="text-coolGray-900" d="M61.1459 5.71634V25.0909H56.6688V5.71634H61.1459Z" fill="currentColor"></path>
          <path class="text-coolGray-900" d="M78.162 17.5505C78.162 17.9694 78.1358 18.4058 78.0835 18.8596H67.9511C68.0209 19.7672 68.3089 20.4654 68.8151 20.9542C69.3387 21.4254 69.9758 21.6611 70.7264 21.6611C71.8434 21.6611 72.6202 21.1898 73.0565 20.2472H77.8216C77.5773 21.2072 77.1322 22.0712 76.4864 22.8392C75.858 23.6072 75.0638 24.2094 74.1038 24.6458C73.1438 25.0822 72.0704 25.3003 70.8834 25.3003C69.4522 25.3003 68.178 24.9949 67.0609 24.384C65.9438 23.7731 65.0711 22.9003 64.4427 21.7658C63.8144 20.6312 63.5002 19.3047 63.5002 17.7862C63.5002 16.2676 63.8056 14.9411 64.4165 13.8065C65.0449 12.672 65.9176 11.7992 67.0347 11.1883C68.1518 10.5774 69.4347 10.272 70.8834 10.272C72.2973 10.272 73.554 10.5687 74.6536 11.1622C75.7533 11.7556 76.6085 12.6022 77.2195 13.7018C77.8478 14.8014 78.162 16.0843 78.162 17.5505ZM73.5802 16.3723C73.5802 15.6043 73.3184 14.9934 72.7947 14.5396C72.2711 14.0858 71.6165 13.8589 70.8311 13.8589C70.0805 13.8589 69.4434 14.0771 68.9198 14.5134C68.4136 14.9498 68.0994 15.5694 67.9773 16.3723H73.5802Z" fill="currentColor"></path>
          <path class="text-coolGray-900" d="M89.1639 25.0909L86.3624 21.0327L84.0061 25.0909H79.1624L83.9799 17.6291L79.0315 10.4814H84.0584L86.8599 14.5134L89.2162 10.4814H94.0599L89.1639 17.8385L94.1908 25.0909H89.1639Z" fill="currentColor"></path>
          <path d="M14.626 9.94598C19.0055 11.4917 23.7285 11.4058 28.0651 9.73131C28.108 7.97092 27.6357 6.21053 26.8199 4.62189L26.3906 3.76316C26.2618 3.8061 26.09 3.89198 26.0041 3.97785C22.054 5.86705 17.5886 6.12467 13.4238 4.6219C10.5042 3.59143 7.32687 3.84904 4.57895 5.223L3.72023 5.65236C3.76316 5.78117 3.84904 5.95291 3.93492 6.03878C4.45015 7.15513 4.87951 8.35735 5.18006 9.6025C8.1856 8.74377 11.5346 8.82964 14.626 9.94598Z" fill="currentColor"></path>
          <path d="M3.93493 22.8698L4.87952 22.3546C6.7935 21.3976 8.90498 20.9343 11 20.9954C12.2888 21.033 13.5713 21.269 14.7978 21.7105C15.1973 21.8523 15.5981 21.9824 16 22.1011V26.6777C14.3376 26.3686 12.6547 26.3245 11 26.5375C9.28349 26.7585 7.59733 27.2562 5.99586 28.0221C5.90999 28.108 5.73824 28.1939 5.60943 28.2368L5.18007 27.3781C4.45015 25.9612 4.0208 24.4155 3.93493 22.8698Z" fill="currentColor"></path>
          <path d="M4.45002 18.9197C8.0996 17.4169 12.1786 17.2881 15.914 18.6191C19.3489 19.8213 22.9985 20.036 26.4334 19.2631C26.3905 17.331 26.6481 15.4418 27.3351 13.5526C22.8267 14.8836 17.9749 14.7548 13.4666 13.1662C10.8905 12.2216 8.05667 12.2216 5.48049 13.0803C5.52343 14.9266 5.17995 16.8158 4.5359 18.662C4.5359 18.662 4.49296 18.7909 4.45002 18.9197Z" fill="currentColor"></path>
        </svg>
      </a>
      <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
        <div class="w-full md:w-auto p-3 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: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: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: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: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: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: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>
    </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

Centered Footer with Flex Logo and Links

A centered website footer showing the Flex logo, a horizontal row of navigation links (Product, Features, Pricing, Resources, Careers, Help, Privacy), a divider line, and a copyright notice. The layout is simple and stacked vertically on a light background.

Tailwind Component #109

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="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="text-center">
        <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-10 mx-auto text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter max-w-5xl">Great work starts with your app</h3>
        <div class="relative mb-10 mx-auto max-w-max">
          <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle1-yellow.svg" alt="">
          <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots1-blue.svg" alt="">
          <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="">
        </div>
        <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-400 font-medium max-w-4xl">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 class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg 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="#">Learn More</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-100 bg-coolGray-600 hover:bg-coolGray-700 font-medium text-center focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">About Us</a></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

Tailwind Component #110

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 xl:pb-28 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">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 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 items-center pt-10 px-8 pb-8 bg-coolGray-50 rounded-md shadow-md hover:scale-105 transition duration-500">
          <span class="inline-block py-px px-2 mb-6 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
          <h3 class="mb-4 text-lg md:text-xl text-green-500 font-medium">Basic Plan</h3>
          <div class="mb-4">
            <span class="relative -top-6 right-1 text-2xl text-coolGray-900 font-medium">$</span>
            <span class="text-5xl text-coolGray-900 font-medium">10</span>
            <span class="text-3xl text-coolGray-900 font-medium">/mo</span>
          </div>
          <p class="mb-7 text-lg md:text-xl text-coolGray-400 font-medium">Billed annually</p>
          <ul class="self-start mb-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">
              <span>Complete documentation</span>
            </li>
            <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">
              <span>Working materials in Figma</span>

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

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="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-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">
      <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-600">Trusted by the top companies in this industry</h3>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-dark.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-dark.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo-dark.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo-dark.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/welytics-logo-dark.svg" alt="">

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

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 mx-auto bg-white border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
        <div class="w-auto p-2">
          <p class="font-semibold text-lg text-coolGray-900">Schedule</p>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap -m-2">
            <div class="w-auto p-2">
              <button class="px-3 py-1 text-xs font-medium text-darkCoolGray-500 bg-darkCoolGray-100 rounded-full">Today</button>
            </div>
            <div class="w-auto p-2">
              <button class="px-3 py-1 text-xs font-medium text-darkCoolGray-500 bg-transparent rounded-full">Tomorrow</button>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Group meeting</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">

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

Schedule List Card with Today/Tomorrow Toggle

A white card titled Schedule showing a vertical list of meetings with time and location metadata, a Today/Tomorrow segmented control in the header, and a See all schedules button at the bottom. Rows are separated by thin dividers.

Tailwind Component #113

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 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 rounded-full shadow-sm">Application</span>
        <h3 class="mb-10 mx-auto text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter max-w-5xl">Great work starts with your app</h3>
        <div class="relative mb-10 mx-auto max-w-max">
          <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle1-yellow.svg" alt="">
          <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots1-blue.svg" alt="">
          <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="">
        </div>
        <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">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 class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">Learn More</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>

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

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

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

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="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Our team is the best in the business.</h3>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="text-center max-w-xs mx-auto">
            <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-1 text-lg font-semibold text-white">Macauley Herring</h3>
            <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <div class="flex items-center justify-center">
              <a class="inline-block mr-5 text-coolGray-700 hover:text-coolGray-600" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>

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

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 xl:pb-28 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 -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-5 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">Rich text</span>
        <h3 class="mb-5 text-3xl md:text-4xl text-coolGray-900 font-bold tracking-tighter">Flex is a simple, beautiful tool that helps you work sanely</h3>
        <p class="mb-6 text-lg md:text-xl leading-8 text-coolGray-500 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        <p class="text-lg font-medium leading-7 text-coolGray-500">Flex is the only saas business platform that lets you run your business on one platform.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">
          <span>With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</span>
          <ol class="mb-5 list-decimal list-inside text-lg font-medium leading-7 text-coolGray-500">
            <li>
              <span class="text-lg font-medium leading-8 text-coolGray-500">Enterprise software for startups</span>
            </li>
            <li>
              <span class="text-lg font-medium leading-8 text-coolGray-500">Time is money. Stop jumping from tool to tool with all the hassle of integrations.</span>
            </li>
            <li>
              <span class="text-lg font-medium leading-8 text-coolGray-500">Now you can manage your entire business on one platform.</span>
            </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

Two-column rich text marketing section for Flex SaaS platform

A light-background rich text section with a small green 'RICH TEXT' label, a bold heading, a subheading, and body paragraphs split across two columns. It presents text-only product messaging for a SaaS business platform with no images, buttons, or interactive controls visible.

Tailwind Component #117

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="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="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-5 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">Rich text</span>
          <h3 class="mb-5 text-3xl md:text-4xl text-coolGray-900 font-bold tracking-tighter">Flex is a simple, beautiful tool that helps you work sanely</h3>
          <p class="mb-6 text-lg md:text-xl leading-8 text-coolGray-500 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
          <p class="text-lg font-medium leading-7 text-coolGray-500">Flex is the only saas business platform that lets you run your business on one platform.</p>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">
            <span>With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</span>
            <ol class="mb-5 list-decimal list-inside text-lg font-medium leading-7 text-coolGray-500">
              <li>
                <span class="text-lg font-medium leading-8 text-coolGray-500">Enterprise software for startups</span>
              </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

Tailwind Component #118

Tailwind CSS

Flex

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

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

FAQ Section with Nine-Card Grid

A light-background FAQ section with an eyebrow label, centered heading and subtitle, and a three-by-three grid of cards each containing a green question-mark shield icon, a question, and a short answer. The layout is purely informational with no visible interactive controls.

Tailwind Component #119

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="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="pt-24 pb-11 mx-auto max-w-4xl">
        <a class="block md:mx-auto mb-5 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
        <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
          <div class="w-full md:w-auto p-3 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: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: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: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: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: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: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>
      </div>
    </div>
    <div class="border-b border-coolGray-100"></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

Centered Footer with Logo, Link Row, and Copyright

A light gray footer section with a curved top edge, centered Flex logo, a horizontal row of navigation links (Product, Features, Pricing, Resources, Careers, Help, Privacy), a divider line, and a centered copyright notice. Layout is a centered vertical stack with no visible interactive states.

Tailwind Component #120

Tailwind CSS

Flex

<section class="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="pt-24 pb-11 mx-auto max-w-4xl">
      <a class="block md:mx-auto mb-5 max-w-max" href="#">
        <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
      </a>
      <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
        <div class="w-full md:w-auto p-3 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: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: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: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: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: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: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>
    </div>
  </div>
  <div class="border-b border-coolGray-800"></div>
  <div class="container px-4 mx-auto">
    <p class="py-10 md:pb-20 text-lg md:text-xl text-coolGray-400 font-medium text-center">&copy; 2021 Flex. All rights reserved.</p>
  </div>
</section>

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

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

Tailwind CSS Components – Flex Library

Framework

UI Library

Components

Tailwind Component #101

Get the code for 13,400+ components

Tailwind Component #102

Get the code for 13,400+ components

Cookie consent banner with Decline and Allow buttons

Tailwind Component #103

Get the code for 13,400+ components

Success Notification Banner with Dismiss Button

Tailwind Component #104

Get the code for 13,400+ components

Tailwind Component #105

Get the code for 13,400+ components

Tailwind Component #106

Get the code for 13,400+ components

Tailwind Component #107

Get the code for 13,400+ components

FAQ Section with Three-Column Question Card Grid

Tailwind Component #108

Get the code for 13,400+ components

Centered Footer with Flex Logo and Links

Tailwind Component #109

Get the code for 13,400+ components

Tailwind Component #110

Get the code for 13,400+ components

Tailwind Component #111

Get the code for 13,400+ components

Tailwind Component #112

Get the code for 13,400+ components

Schedule List Card with Today/Tomorrow Toggle

Tailwind Component #113

Get the code for 13,400+ components

Tailwind Component #114

Get the code for 13,400+ components

Tailwind Component #115

Get the code for 13,400+ components

Tailwind Component #116

Get the code for 13,400+ components

Two-column rich text marketing section for Flex SaaS platform

Tailwind Component #117

Get the code for 13,400+ components

Tailwind Component #118

Get the code for 13,400+ components

FAQ Section with Nine-Card Grid

Tailwind Component #119

Get the code for 13,400+ components

Centered Footer with Logo, Link Row, and Copyright

Tailwind Component #120

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