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

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-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-grey.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-grey.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-grey.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-grey.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-grey.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 #242

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>
          <p class="font-semibold text-coolGray-200">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-coolGray-800 bg-white hover:bg-coolGray-50 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

Green promotional banner with heading and Get Started button

A full-width green promotional banner with a bold white heading, supporting text, and a white Get Started call-to-action button on the right. Decorative patterned shapes and dotted accents sit in the background.

Banners generator

Tailwind Component #243

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-white" 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 items-center -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">How it works</span>
          <h2 class="mb-6 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h2>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative mx-auto md:mr-0 max-w-max overflow-hidden rounded-7xl">
            <img src="flex-ui-assets/images/how-it-works/placeholder-video.png" alt="">
            <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
              <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
            </video>
            <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full" href="#">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.5 11.13L5.50001 3.05C5.34799 2.96223 5.17554 2.91603 5.00001 2.91603C4.82447 2.91603 4.65203 2.96223 4.50001 3.05C4.3474 3.1381 4.22079 3.26497 4.13299 3.41775C4.04518 3.57052 3.99931 3.74379 4.00001 3.92V20.08C3.99931 20.2562 4.04518 20.4295 4.13299 20.5823C4.22079 20.735 4.3474 20.8619 4.50001 20.95C4.65203 21.0378 4.82447 21.084 5.00001 21.084C5.17554 21.084 5.34799 21.0378 5.50001 20.95L19.5 12.87C19.6539 12.7828 19.7819 12.6563 19.871 12.5035C19.96 12.3506 20.007 12.1769 20.007 12C20.007 11.8231 19.96 11.6494 19.871 11.4965C19.7819 11.3437 19.6539 11.2172 19.5 11.13ZM6.00001 18.35V5.65L17 12L6.00001 18.35Z" fill="white"></path>
              </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

How it works generator

Tailwind Component #244

Tailwind CSS

Flex

<section class="relative pt-16 pb-0 md:py-32 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto mb-16">
    <div class="w-full md:w-3/5 lg:w-1/2">
      <div class="max-w-sm mx-auto">
        <div class="mb-6 text-center">
          <a class="inline-block mb-6" href="#">
            <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
          </a>
          <h3 class="mb-4 text-2xl md:text-3xl font-bold">Sign in to your account</h3>
          <p class="text-lg text-coolGray-500 font-medium">Start your demo version</p>
        </div>
        <form action="">
          <div class="mb-6">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Email</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="email" placeholder="dev@shuffle.dev">
          </div>
          <div class="mb-4">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Password</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
          </div>
          <div class="flex flex-wrap items-center justify-between mb-6">
            <div class="w-full md:w-1/2">
              <label class="relative inline-flex items-center">
                <input class="form-checkbox appearance-none" type="checkbox">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #245

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="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-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap pt-24 pb-12 -mx-4">
        <div class="w-full md:w-1/2 lg:w-4/12 px-4 mb-16 lg:mb-0">
          <a class="inline-block mb-4" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
          <p class="text-base md:text-lg text-coolGray-400 font-medium lg:w-64">Launch your own Software As A Service Application with Flex Solutions.</p>
        </div>
        <div class="w-full md:w-1/4 lg:w-2/12 px-4 mb-16 lg:mb-0">
          <h3 class="mb-5 text-lg font-bold text-white">Product</h3>
          <ul>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Solutions</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Tutorials</a></li>
            <li><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Updates</a></li>
          </ul>

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

Tailwind CSS

Flex

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 w-full bg-white max-w-3xl border border-coolGray-100 rounded-md shadow-md">
    <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>

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

Cookies generator

Tailwind Component #247

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: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 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-green-600 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-green-600 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-green-600 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-green-600 tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Unique Users</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Stats generator

Tailwind Component #248

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 -mx-4 mb-16">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">How it works</span>
        <h2 class="mb-6 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="relative mx-auto md:mr-0 max-w-max overflow-hidden rounded-7xl">
          <img src="flex-ui-assets/images/how-it-works/placeholder-video.png" alt="">
          <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
            <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
          </video>
          <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full" href="#">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.5 11.13L5.50001 3.05C5.34799 2.96223 5.17554 2.91603 5.00001 2.91603C4.82447 2.91603 4.65203 2.96223 4.50001 3.05C4.3474 3.1381 4.22079 3.26497 4.13299 3.41775C4.04518 3.57052 3.99931 3.74379 4.00001 3.92V20.08C3.99931 20.2562 4.04518 20.4295 4.13299 20.5823C4.22079 20.735 4.3474 20.8619 4.50001 20.95C4.65203 21.0378 4.82447 21.084 5.00001 21.084C5.17554 21.084 5.34799 21.0378 5.50001 20.95L19.5 12.87C19.6539 12.7828 19.7819 12.6563 19.871 12.5035C19.96 12.3506 20.007 12.1769 20.007 12C20.007 11.8231 19.96 11.6494 19.871 11.4965C19.7819 11.3437 19.6539 11.2172 19.5 11.13ZM6.00001 18.35V5.65L17 12L6.00001 18.35Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 text-center md:text-left">
      <div class="w-full md:w-1/2 md:w-1/3 px-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

How it works generator

Tailwind Component #249

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 px-4 mb-10">
          <div class="flex flex-wrap justify-between items-center">
            <div class="w-full md:w-1/2 mb-10 md:mb-0">
              <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Rich text</span>
              <h3 class="mb-4 text-3xl md:text-4xl text-coolGray-900 font-bold tracking-tighter">Beautiful tool that helps you</h3>
              <p class="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>
            </div>
            <div class="w-full md:w-auto">
              <div class="flex flex-wrap justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-coolGray-500 bg-white border border-transparent hover:border-coolGray-200 rounded-md" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
          <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>

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

Tailwind CSS

Flex

<section x-data="{ current: 0 }" class="py-24 md:pb-28 bg-white" 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 lg:w-1/2 px-4 mb-10 lg:mb-0">
        <div class="relative h-full overflow-hidden max-w-max mx-auto rounded-md">
          <button class="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full">
            <svg class="ml-1" width="17" height="20" viewbox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.5 9.13001L1.50001 1.05001C1.34799 0.962237 1.17554 0.916031 1.00001 0.916031C0.824471 0.916031 0.652027 0.962237 0.500008 1.05001C0.347404 1.13811 0.220789 1.26497 0.132986 1.41775C0.0451825 1.57053 -0.000691684 1.7438 7.88292e-06 1.92001V18.08C-0.000691684 18.2562 0.0451825 18.4295 0.132986 18.5823C0.220789 18.735 0.347404 18.8619 0.500008 18.95C0.652027 19.0378 0.824471 19.084 1.00001 19.084C1.17554 19.084 1.34799 19.0378 1.50001 18.95L15.5 10.87C15.6539 10.7828 15.7819 10.6563 15.871 10.5035C15.96 10.3506 16.007 10.1769 16.007 10C16.007 9.82311 15.96 9.64938 15.871 9.49654C15.7819 9.3437 15.6539 9.21722 15.5 9.13001ZM2.00001 16.35V3.65001L13 10L2.00001 16.35Z" fill="white"></path>
            </svg>
          </button>
          <img src="flex-ui-assets/elements/testimonials/placeholder-video.png">
          <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
            <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
          </video>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div x-show="current === 0">
            <span class="inline-block py-px px-2 sm:ml-6 md:mb-16 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
            <div class="relative pt-12 pb-6 sm:p-6 mb-8">
              <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">
                <h2 class="text-2xl md:text-4xl font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</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 #251

Tailwind CSS

Flex

<section class="relative pt-16 pb-0 md:py-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 mb-16">
    <div class="w-full md:w-3/5 lg:w-1/2">
      <div class="max-w-sm mx-auto">
        <div class="mb-6 text-center">
          <a class="inline-block mb-6" href="#">
            <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
          </a>
          <h3 class="mb-4 text-2xl md:text-3xl font-bold">Sign in to your account</h3>
          <p class="text-lg text-coolGray-500 font-medium">Start your demo version</p>
        </div>
        <form action="">
          <div class="mb-6">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Email</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="email" placeholder="dev@shuffle.dev">
          </div>
          <div class="mb-4">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Password</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
          </div>
          <div class="flex flex-wrap items-center justify-between mb-6">
            <div class="w-full md:w-1/2">
              <label class="relative inline-flex items-center">
                <input class="form-checkbox appearance-none" type="checkbox">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #252

Tailwind CSS

Flex

<section class="py-20 xl: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 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-green-600 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-green-600 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-green-600 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-green-600 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 #253

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-grey.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-grey.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-grey.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-grey.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-grey.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 #254

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 md:pt-36 bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
          <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Get our Free Mobile App</h3>
          <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <div class="flex flex-wrap">
            <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-4">
              <img src="flex-ui-assets/elements/app-store-dark.svg" alt="">
            </div>
            <div class="w-full md:w-auto">
              <img src="flex-ui-assets/elements/google-play-dark.svg" alt="">
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative flex flex-row items-center mx-auto md:mr-0 max-w-max">

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

Tailwind CSS

Flex

<section class="relative py-24 md:py-40 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <img class="mx-auto" src="flex-ui-assets/images/http-codes/dog-error.png" alt="">
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="md:max-w-xl text-center md:text-left">
          <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">Error 404</span>
          <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Oh no! Error 404</h2>
          <p class="mb-6 text-lg md:text-xl text-coolGray-400">Something went wrong, so this page is broken.</p>
          <div class="flex flex-wrap">
            <div class="w-full lg:w-auto py-1 lg:py-0 lg: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 rounded-md shadow-sm" href="#">Go back to Homepage</a></div>
            <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 font-medium text-center bg-coolGray-600 hover:bg-coolGray-700 focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Try Again</a></div>
          </div>
        </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

HTTP codes generator

Tailwind Component #256

Tailwind CSS

Flex

<section x-data="{ current: 0 }" class="py-24 md: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-10 lg:mb-0">
        <div class="relative h-full overflow-hidden max-w-max mx-auto rounded-md">
          <button class="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full">
            <svg class="ml-1" width="17" height="20" viewbox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.5 9.13001L1.50001 1.05001C1.34799 0.962237 1.17554 0.916031 1.00001 0.916031C0.824471 0.916031 0.652027 0.962237 0.500008 1.05001C0.347404 1.13811 0.220789 1.26497 0.132986 1.41775C0.0451825 1.57053 -0.000691684 1.7438 7.88292e-06 1.92001V18.08C-0.000691684 18.2562 0.0451825 18.4295 0.132986 18.5823C0.220789 18.735 0.347404 18.8619 0.500008 18.95C0.652027 19.0378 0.824471 19.084 1.00001 19.084C1.17554 19.084 1.34799 19.0378 1.50001 18.95L15.5 10.87C15.6539 10.7828 15.7819 10.6563 15.871 10.5035C15.96 10.3506 16.007 10.1769 16.007 10C16.007 9.82311 15.96 9.64938 15.871 9.49654C15.7819 9.3437 15.6539 9.21722 15.5 9.13001ZM2.00001 16.35V3.65001L13 10L2.00001 16.35Z" fill="white"></path>
            </svg>
          </button>
          <img src="flex-ui-assets/elements/testimonials/placeholder-video.png">
          <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
            <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
          </video>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div x-show="current === 0">
          <span class="inline-block py-px px-2 sm:ml-6 md:mb-16 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
          <div class="relative pt-12 pb-6 sm:p-6 mb-8">
            <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">
              <h2 class="text-2xl md:text-4xl font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</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 #257

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
          <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Sign up for our newsletter</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="mx-auto md:mr-0 md:max-w-md">
            <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>

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

Newsletter generator

Tailwind Component #258

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="py-6 bg-white rounded-md shadow-lg">
      <div class="flex flex-wrap items-center justify-between pb-6 mb-6 px-6 -mx-2 border-b border-coolGray-100">
        <div class="w-auto px-2">
          <h2 class="text-lg text-coolGray-900 font-semibold">Card heading title</h2>
        </div>
        <div class="w-auto px-2">
          <a href="#">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="#D5DAE1"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="px-6"></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

Cards generator

Tailwind Component #259

Tailwind CSS

Flex

<section class="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 pt-24 pb-12 -mx-4">
      <div class="w-full md:w-1/2 lg:w-4/12 px-4 mb-16 lg:mb-0">
        <a class="inline-block mb-4" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
        <p class="text-base md:text-lg text-coolGray-500 font-medium lg:w-64">Launch your own Software As A Service Application with Flex Solutions.</p>
      </div>
      <div class="w-full md:w-1/4 lg:w-2/12 px-4 mb-16 lg:mb-0">
        <h3 class="mb-5 text-lg font-bold text-coolGray-900">Product</h3>
        <ul>
          <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></li>
          <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Solutions</a></li>
          <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></li>
          <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Tutorials</a></li>
          <li><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Updates</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 lg:w-2/12 px-4 mb-16 lg:mb-0">
        <h3 class="mb-5 text-lg font-bold text-coolGray-900">Remaining</h3>
        <ul>
          <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Blog</a></li>
          <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Newsletter</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Footers generator

Tailwind Component #260

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 items-center -m-2">
        <div class="w-full md:w-auto p-2">
          <h3 class="mb-0.5 font-medium text-sm text-coolGray-900">Receive notification</h3>
          <p class="font-medium text-sm text-coolGray-600">Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="w-full md:w-auto p-2">
          <div class="flex flex-wrap items-center justify-between -m-1.5">
            <div class="w-full md:w-auto p-1.5">
              <button class="flex flex-wrap justify-center w-full px-4 py-1.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 rounded-md">
                <p>Don&rsquo;t Allow</p>
              </button>
            </div>
            <div class="w-full md:w-auto p-1.5">
              <button class="flex flex-wrap justify-center w-full px-4 py-1.5 bg-green-500 hover:bg-green-600 font-medium text-sm text-white border border-green-500 rounded-md shadow-button">
                <p>Reply</p>
              </button>
            </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

Notification Permission Banner with Reply Action

A horizontal white notification banner prompting the user to receive notifications, with a text-style Don't Allow option and a green Reply button aligned to the right. Placeholder body text is shown beneath the heading on a light gray page background.

Notifications 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 #241

Get the code for 13,400+ components

Tailwind Component #242

Get the code for 13,400+ components

Green promotional banner with heading and Get Started button

Tailwind Component #243

Get the code for 13,400+ components

Tailwind Component #244

Get the code for 13,400+ components

Tailwind Component #245

Get the code for 13,400+ components

Tailwind Component #246

Get the code for 13,400+ components

Tailwind Component #247

Get the code for 13,400+ components

Tailwind Component #248

Get the code for 13,400+ components

Tailwind Component #249

Get the code for 13,400+ components

Tailwind Component #250

Get the code for 13,400+ components

Tailwind Component #251

Get the code for 13,400+ components

Tailwind Component #252

Get the code for 13,400+ components

Tailwind Component #253

Get the code for 13,400+ components

Tailwind Component #254

Get the code for 13,400+ components

Tailwind Component #255

Get the code for 13,400+ components

Tailwind Component #256

Get the code for 13,400+ components

Tailwind Component #257

Get the code for 13,400+ components

Tailwind Component #258

Get the code for 13,400+ components

Tailwind Component #259

Get the code for 13,400+ components

Tailwind Component #260

Get the code for 13,400+ components

Notification Permission Banner with Reply Action

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