Tailwind CSS Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

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

Tailwind CSS

Flex

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <section class="py-20 xl:pt-24 xl:pb-32 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="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">Numbers</span>
        <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter">We believe in the power of data</h3>
        <p class="mb-16 xl:mb-24 mx-auto text-lg md:text-xl text-coolGray-400 font-medium max-w-4xl">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <div class="flex flex-wrap justify-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 text-green-600 font-bold tracking-tighter">235.000</h2>
            <p class="text-lg md:text-xl text-coolGray-400 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 text-4xl md:text-5xl text-green-600 font-bold tracking-tighter">$10m</h2>
            <p class="text-lg md:text-xl text-coolGray-400 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 text-4xl md:text-5xl text-green-600 font-bold tracking-tighter">+50.000</h2>
            <p class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #3382

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="mb-16">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
        <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-semibold tracking-tighter">Testimonial from Flex app users</h2>
        <p class="text-xl font-medium text-coolGray-500">With Flex, you can build websites without writing code.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
            <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
            <h4 class="mb-1 text-lg font-semibold">Macauley Herring</h4>
            <p class="text-lg text-coolGray-400">CEO &amp; Founder at Flex.co</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
            <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #3383

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <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">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo-grey.svg" alt="">
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Logo clouds Component Generator

Tailwind Component #3384

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Rich text Component Generator

Tailwind Component #3385

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">
      <div class="flex flex-wrap items-center justify-between -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-md">
            <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
            <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Meet our team</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>
        <div class="w-full md:w-auto px-4">
          <div class="flex flex-wrap justify-center">
            <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 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="#">We are hiring</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-700 hover:bg-coolGray-800 font-medium text-center focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Our Culture</a></div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Team Component Generator

Tailwind Component #3386

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <img class="absolute top-6 left-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg">
    <img class="absolute bottom-6 right-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg">
    <div class="container relative z-10 px-4 mx-auto">
      <div class="mx-auto max-w-xl text-center">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Sign up for our newsletter</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-400 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <div class="flex flex-wrap mb-1">
            <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
              <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
            </div>
            <div class="w-full md:w-auto"><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="#">Subscribe</a></div>
          </div>
          <span class="text-xs text-coolGray-500 font-medium">
            <span>We care about your data in our</span>
            <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
          </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

AI Newsletter Component Generator

Tailwind Component #3387

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4 mb-16">
      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
        <div class="max-w-md">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
          <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter">Meet our team</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>
      <div class="w-full md:w-auto px-4">
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 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="#">Open Positions</a></div>
          <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 bg-coolGray-700 hover:bg-coolGray-800 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>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-max mx-auto">
          <img class="block mb-8" src="flex-ui-assets/images/teams/photo-employee1.png" alt="">
          <h3 class="mb-2 text-3xl md:text-4xl leading-tight text-white font-semibold">Macauley Herring</h3>
          <span class="text-lg font-medium text-green-500">CEO &amp; Founder</span>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Team Component Generator

Tailwind Component #3388

Tailwind CSS

Flex

<div 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>
  <section class="py-20 xl:pt-24 xl:pb-32 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Numbers</span>
        <h3 class="mb-4 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">We believe in the power of data</h3>
        <p class="mb-16 xl:mb-24 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <div class="flex flex-wrap justify-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 text-green-600 font-bold 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 text-4xl md:text-5xl text-green-600 font-bold 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 text-4xl md:text-5xl text-green-600 font-bold tracking-tighter">+50.000</h2>
            <p class="text-lg md:text-xl text-coolGray-500 font-medium">Hours Saved Annually</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #3389

Tailwind CSS

Flex

<section class="py-20 xl:py-24 bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
      <h3 class="mb-4 text-3xl md:text-5xl text-white font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-medium">Pricing that scales with your business immediately.</p>
      <div class="flex mb-12 mx-auto max-w-max border border-coolGray-800 overflow-hidden rounded-md shadow-lg"><a class="py-3 px-5 text-sm text-white bg-coolGray-500 font-medium border-r border-coolGray-800" href="#">Billed Monthly</a><a class="py-3 px-5 text-sm text-coolGray-400 bg-coolGray-700 font-medium" href="#">Billed Annually</a></div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col pt-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
          <div class="flex items-center justify-between px-8">
            <div>
              <h3 class="text-2xl md:text-3xl text-coolGray-800 font-semibold tracking-tighter">Basic plan</h3>
              <p class="text-coolGray-400 font-medium">For bigger teams</p>
            </div>
            <div>
              <span class="relative -top-10 right-1 text-3xl text-coolGray-900 font-bold">$</span>
              <span class="text-6xl md:text-7xl text-coolGray-900 font-semibold tracking-tighter">99</span>
              <span class="inline-block ml-1 text-coolGray-500 font-semibold">/mo</span>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
          <ul class="self-start px-8 pt-8 pb-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

AI Pricing Component Generator

Tailwind Component #3390

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-20 bg-coolGray-900">
    <div class="relative container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-14 md:mb-0">
          <div class="max-w-md">
            <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold text-white leading-snug">The fastest way from idea to live site. Period.</h2>
            <p class="text-lg md:text-xl font-heading font-medium text-coolGray-400">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="flex flex-wrap items-center md:justify-end"><a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto mb-2 md:mb-0 md:mr-4 text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a><a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-coolGray-100 bg-coolGray-700 hover:bg-coolGray-800 font-medium focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Learn More</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" 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

AI Call to action Component Generator

Tailwind Component #3391

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-green-500 rounded-md overflow-hidden">
      <img class="absolute z-10 left-4 top-4" src="flex-ui-assets/elements/dashboard/banners/dots-red.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-basic.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>
          <ul class="flex flex-wrap">
            <li class="flex items-center mr-6 text-sm text-white font-semibold">
              <img class="relative top-px mr-2" src="flex-ui-assets/elements/dashboard/banners/checkbox-red.svg">
              <span>Benefit number one</span>
            </li>
            <li class="flex items-center mr-6 text-sm text-white font-semibold">
              <img class="relative top-px mr-2" src="flex-ui-assets/elements/dashboard/banners/checkbox-red.svg">
              <span>Benefit number two</span>
            </li>
            <li class="flex items-center mr-6 text-sm text-white font-semibold">
              <img class="relative top-px mr-2" src="flex-ui-assets/elements/dashboard/banners/checkbox-red.svg">
              <span>Benefit number three</span>
            </li>
          </ul>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Banners Component Generator

Tailwind Component #3392

Tailwind CSS

Flex

<section class="pt-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-16">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-lg md:text-xl text-coolGray-400 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap pb-16 -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-white font-bold">What shipping options do you have?</h3>
          <p class="text-coolGray-400 font-medium">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-white font-bold">What payment methods do you accept?</h3>
          <p class="text-coolGray-400 font-medium">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #3393

Tailwind CSS

Flex

<section class="relative py-24 md:py-32 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="mb-16 h-40 md:h-auto rounded-7xl overflow-hidden">
      <img class="w-full h-full object-cover" src="flex-ui-assets/images/http-codes/banner-dog-error.png" alt="">
    </div>
    <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">Error 404</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
      <p class="mb-12 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</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="#">Go back to Homepage</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="#">Try Again</a></div>
      </div>
    </div>
  </div>
  <img class="absolute top-0 left-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave2-yellow.svg" alt="">
  <img class="absolute right-6 top-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
  <img class="absolute right-0 bottom-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
  <img class="absolute left-6 bottom-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
</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

AI HTTP codes Component Generator

Tailwind Component #3394

Tailwind CSS

Flex

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 w-full bg-coolGray-50 max-w-md border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <h3 class="mb-4 text-lg md:text-xl text-coolGray-900 font-semibold">Cookie Policy</h3>
      <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 mb-6 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>
      <a class="inline-block py-3 px-5 mb-4 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><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>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #3395

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-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-900 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 text-white 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-coolGray-900 bg-green-500 font-semibold rounded-full">1</div>
              <h3 class="mb-2 text-xl text-white font-bold">Custom analytics</h3>
              <p class="font-medium text-coolGray-400">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Tailwind Component #3396

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900">
  <div class="container px-4 mx-auto">
    <div class="relative py-16 md:py-32 px-6 text-center bg-white overflow-hidden rounded-7xl" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
      <div class="relative z-10 mx-auto md:max-w-2xl">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Be the first to know when we launch</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <div class="flex flex-wrap mb-1">
            <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
              <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
            </div>
            <div class="w-full md:w-auto"><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="#">Subscribe</a></div>
          </div>
          <span class="text-xs text-coolGray-500 font-medium">
            <span>We care about your data in our</span>
            <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
          </span>
        </div>
      </div>
      <img class="absolute top-0 left-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave2-yellow.svg" alt="">
      <img class="absolute right-6 top-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
      <img class="absolute right-0 bottom-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
      <img class="absolute left-6 bottom-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg" alt="">
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #3397

Tailwind CSS

Flex

<section class="py-24 md: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="mb-16">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
      <h2 class="mb-4 text-4xl md:text-5xl text-white leading-tight font-semibold tracking-tighter">Testimonial from Flex app users</h2>
      <p class="text-xl font-medium text-coolGray-400">With Flex, you can build websites without writing code.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
          <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
          <h4 class="mb-1 text-lg font-semibold">Macauley Herring</h4>
          <p class="text-lg text-coolGray-400">CEO &amp; Founder at Flex.co</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
          <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</h3>
          <h4 class="mb-1 text-lg font-semibold">Ivan Mathews</h4>
          <p class="text-lg text-coolGray-400">CTO at Flex.co</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #3398

Tailwind CSS

Flex

<section class="pt-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-16">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap pb-16 -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What shipping options do you have?</h3>
          <p class="text-coolGray-500 font-medium">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What payment methods do you accept?</h3>
          <p class="text-coolGray-500 font-medium">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #3399

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 py-7 bg-white border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="w-auto p-2">
          <h3 class="font-medium text-sm text-coolGray-900">Simple notification action</h3>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-4">
            <div class="w-auto p-4"><a class="font-medium text-sm text-green-600 hover:text-green-700" href="#">Undo</a></div>
            <div class="w-auto p-4">
              <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>
          </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

AI Notifications Component Generator

Tailwind Component #3400

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Tailwind Component #3381

Get the code for 13,400+ components

Tailwind Component #3382

Get the code for 13,400+ components

Tailwind Component #3383

Get the code for 13,400+ components

Tailwind Component #3384

Get the code for 13,400+ components

Tailwind Component #3385

Get the code for 13,400+ components

Tailwind Component #3386

Get the code for 13,400+ components

Tailwind Component #3387

Get the code for 13,400+ components

Tailwind Component #3388

Get the code for 13,400+ components

Tailwind Component #3389

Get the code for 13,400+ components

Tailwind Component #3390

Get the code for 13,400+ components

Tailwind Component #3391

Get the code for 13,400+ components

Tailwind Component #3392

Get the code for 13,400+ components

Tailwind Component #3393

Get the code for 13,400+ components

Tailwind Component #3394

Get the code for 13,400+ components

Tailwind Component #3395

Get the code for 13,400+ components

Tailwind Component #3396

Get the code for 13,400+ components

Tailwind Component #3397

Get the code for 13,400+ components

Tailwind Component #3398

Get the code for 13,400+ components

Tailwind Component #3399

Get the code for 13,400+ components

Tailwind Component #3400

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