UI Components in Flex library

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

Tailwind CSS

Flex

<section class="py-24 bg-white overflow-hidden" 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 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 -right-8 -top-8 w-28 md:w-auto" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
          <img class="absolute z-10 -left-10 -bottom-8 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
          <img src="flex-ui-assets/images/how-it-works/stock.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">How it works</span>
        <h2 class="mb-12 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h2>
        <div class="flex flex-wrap -mx-4 text-center md:text-left">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-white bg-green-500 font-semibold rounded-full">1</div>
            <h3 class="mb-2 text-xl font-bold">Custom analytics</h3>
            <p class="font-medium text-coolGray-500">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-white bg-green-500 font-semibold rounded-full">2</div>
            <h3 class="mb-2 text-xl font-bold">Team Management</h3>
            <p class="font-medium text-coolGray-500">Our calendar lets you know what is happening with customer and projects so you are able to control process.</p>
          </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

How it works generator

Tailwind Component #122

Tailwind CSS

Flex

<section class="py-20 xl:py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center text-center -mx-4">
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 text-4xl md:text-5xl font-bold text-coolGray-900 tracking-tighter">235.000</h2>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Projects completed</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-coolGray-900 tracking-tighter">$10m</h2>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">APR</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-coolGray-900 tracking-tighter">+50.000</h2>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Hours Saved Annually</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-coolGray-900 tracking-tighter">3.500</h2>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Unique Users</p>
      </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

Stats generator

Tailwind Component #123

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
      <img class="absolute z-10 left-4 top-4" src="flex-ui-assets/elements/dashboard/banners/dots-purple.svg" alt="">
      <img class="absolute z-10 right-4 bottom-4" src="flex-ui-assets/elements/dashboard/banners/dots-red.svg" alt="">
      <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="flex-ui-assets/elements/dashboard/banners/wave.svg" alt="">
      <div class="relative z-20 flex flex-wrap items-center -m-3">
        <div class="w-full md:w-1/2 p-3">
          <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Ideal banner asset for your dashboard project</h2>
          <p class="font-semibold text-coolGray-300">Go global with our UI Resources and solutions</p>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <button class="block md:ml-auto px-7 py-4 font-medium text-lg text-white bg-green-500 hover:bg-green-600 rounded-md">Get Started</button>
        </div>
      </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

Dark promotional banner with heading and green Get Started button

A horizontal dark promotional banner with a bold white two-line heading, a short supporting line, and a green call-to-action button on the right. Decorative dot grids and a semicircle pattern fill the background, giving it a marketing-style hero strip layout.

Banners generator

Tailwind Component #124

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

Testimonials generator

Tailwind Component #125

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.

Cookies generator

Tailwind Component #126

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.

Notifications generator

Tailwind Component #127

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

Logo clouds generator

Tailwind Component #128

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

Navigation (horizontal) generator

Tailwind Component #129

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.

Footers generator

Tailwind Component #130

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

Application generator

Tailwind Component #131

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

Logo clouds generator

Tailwind Component #132

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

Application generator

Tailwind Component #133

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.

Rich text generator

Tailwind Component #134

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

Rich text generator

Tailwind Component #135

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.

Footers generator

Tailwind Component #136

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

Footers generator

Tailwind Component #137

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
      <div class="p-6 pb-18 border-b border-coolGray-100">
        <h2 class="mb-18 text-coolGray-900 text-lg font-semibold">Task distribution</h2>
        <div class="chart-chart1-pie"></div>
      </div>
      <div class="flex flex-wrap divide-y md:divide-y-0 md:divide-x divide-coolGray-100 text-center">
        <div class="w-full md:w-1/2">
          <div class="p-6">
            <h3 class="text-2xl text-coolGray-900 font-semibold">1024</h3>
            <p class="text-xs text-coolGray-500 font-medium">New tasks</p>
          </div>
        </div>
        <div class="w-full md:w-1/2">
          <div class="p-6">
            <h3 class="text-2xl text-coolGray-900 font-semibold">442</h3>
            <p class="text-xs text-coolGray-500 font-medium">Completed tasks</p>
          </div>
        </div>
      </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

Task distribution pie chart card with new and completed task stats

A white card titled Task distribution showing a blue pie chart split into Frontend, Backend, and Management segments with a legend below. A footer row displays two summary metrics: 1024 new tasks and 442 completed tasks.

Graphs generator

Tailwind Component #138

Tailwind CSS

Flex

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

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

Testimonials generator

Tailwind Component #139

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full lg:w-1/2 xl:w-1/4 p-3">
        <div class="h-full border border-coolGray-100 bg-white rounded-md shadow-dashboard">
          <div class="p-6 border-b border-coolGray-100">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
              <div class="w-auto p-2">
                <h2 class="text-coolGray-900 text-lg font-semibold">Active now</h2>
              </div>
              <div class="w-auto p-2">
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 6.66667C7.73629 6.66667 7.47851 6.74487 7.25924 6.89138C7.03998 7.03788 6.86908 7.24612 6.76816 7.48976C6.66724 7.73339 6.64084 8.00148 6.69229 8.26012C6.74373 8.51876 6.87072 8.75634 7.05719 8.94281C7.24366 9.12928 7.48124 9.25627 7.73988 9.30772C7.99852 9.35916 8.26661 9.33276 8.51025 9.23184C8.75388 9.13092 8.96212 8.96003 9.10863 8.74076C9.25514 8.5215 9.33333 8.26371 9.33333 8C9.33333 7.64638 9.19286 7.30724 8.94281 7.05719C8.69276 6.80714 8.35362 6.66667 8 6.66667ZM3.33333 6.66667C3.06963 6.66667 2.81184 6.74487 2.59257 6.89138C2.37331 7.03788 2.20241 7.24612 2.10149 7.48976C2.00058 7.73339 1.97417 8.00148 2.02562 8.26012C2.07707 8.51876 2.20405 8.75634 2.39052 8.94281C2.57699 9.12928 2.81457 9.25627 3.07321 9.30772C3.33185 9.35916 3.59994 9.33276 3.84358 9.23184C4.08721 9.13092 4.29545 8.96003 4.44196 8.74076C4.58847 8.5215 4.66667 8.26371 4.66667 8C4.66667 7.64638 4.52619 7.30724 4.27614 7.05719C4.02609 6.80714 3.68696 6.66667 3.33333 6.66667ZM12.6667 6.66667C12.403 6.66667 12.1452 6.74487 11.9259 6.89138C11.7066 7.03788 11.5357 7.24612 11.4348 7.48976C11.3339 7.73339 11.3075 8.00148 11.359 8.26012C11.4104 8.51876 11.5374 8.75634 11.7239 8.94281C11.9103 9.12928 12.1479 9.25627 12.4065 9.30772C12.6652 9.35916 12.9333 9.33276 13.1769 9.23184C13.4205 9.13092 13.6288 8.96003 13.7753 8.74076C13.9218 8.5215 14 8.26371 14 8C14 7.64638 13.8595 7.30724 13.6095 7.05719C13.3594 6.80714 13.0203 6.66667 12.6667 6.66667Z" fill="#D5DAE1"></path>
                </svg>
              </div>
            </div>
            <div class="chart-graph1-radial-bar"></div>
          </div>
          <div class="p-6">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <p class="font-semibold text-2xl text-coolGray-900">$40,206.20</p>
              </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

Analytics Dashboard Cards: Active Users and Visitors Overview

A dashboard section with two white cards on a light background: a left card showing a circular gauge of 254 active users and a current balance, and a right card with a line chart of unique visitors across months. The layout places a narrow stat card beside a wide chart card with minimal borders and subtle grid lines.

Graphs generator

Tailwind Component #140

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 xl:pb-28 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/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-white 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-400 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-400">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        <p class="text-lg font-medium leading-7 text-coolGray-400">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-400">
          <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-400">
            <li>
              <span class="text-lg font-medium leading-8 text-coolGray-400">Enterprise software for startups</span>
            </li>
            <li>
              <span class="text-lg font-medium leading-8 text-coolGray-400">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-400">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

Rich text 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

UI Components – Flex Library

Framework

UI Library

Components

Tailwind Component #121

Get the code for 13,400+ components

Tailwind Component #122

Get the code for 13,400+ components

Tailwind Component #123

Get the code for 13,400+ components

Dark promotional banner with heading and green Get Started button

Tailwind Component #124

Get the code for 13,400+ components

Tailwind Component #125

Get the code for 13,400+ components

Cookie consent banner with Decline and Allow buttons

Tailwind Component #126

Get the code for 13,400+ components

Success Notification Banner with Dismiss Button

Tailwind Component #127

Get the code for 13,400+ components

Tailwind Component #128

Get the code for 13,400+ components

Tailwind Component #129

Get the code for 13,400+ components

Centered Footer with Flex Logo and Links

Tailwind Component #130

Get the code for 13,400+ components

Tailwind Component #131

Get the code for 13,400+ components

Tailwind Component #132

Get the code for 13,400+ components

Tailwind Component #133

Get the code for 13,400+ components

Two-column rich text marketing section for Flex SaaS platform

Tailwind Component #134

Get the code for 13,400+ components

Tailwind Component #135

Get the code for 13,400+ components

Centered Footer with Logo, Link Row, and Copyright

Tailwind Component #136

Get the code for 13,400+ components

Tailwind Component #137

Get the code for 13,400+ components

Task distribution pie chart card with new and completed task stats

Tailwind Component #138

Get the code for 13,400+ components

Tailwind Component #139

Get the code for 13,400+ components

Analytics Dashboard Cards: Active Users and Visitors Overview

Tailwind Component #140

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support