Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

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

New to Shuffle? Try our tools:

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

Components

Tailwind Component #301

Tailwind CSS

Flaro

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="bg-white overflow-hidden">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-1/2 p-8">
      <div class="container px-4 mx-auto">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="md:max-w-lg mx-auto pt-16 md:pb-24">
              <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
                <div class="w-auto p-2">
                  <a class="inline-block" href="#">
                    <img class="h-10" src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
                  </a>
                </div>
                <div class="w-auto p-2"><a class="text-indigo-600 hover:text-indigo-700 font-medium leading-relaxed" href="#">Sign In</a></div>
              </div>
              <div class="md:max-w-sm">
                <h2 class="mb-4 text-5xl font-bold font-heading tracking-px-n leading-tight">Create free account</h2>
                <p class="mb-9 text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
              </div>
              <form class="md:max-w-lg">
                <label class="block mb-5">
                  <input class="px-4 py-3.5 w-full text-gray-500 font-medium placeholder-gray-500 bg-white outline-none border border-gray-300 rounded-lg focus:ring focus:ring-indigo-300" id="signUpInput3-1" type="text" placeholder="Full name">
                </label>
                <label class="block mb-5">

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 Sign in / Sign up Component Generator

Tailwind Component #302

Tailwind CSS

Flaro

<section class="relative pt-24 pb-28 bg-white overflow-hidden">
  <img class="absolute right-0 top-0 h-full w-full object-cover" src="flaro-assets/images/footers/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap justify-between -m-8">
      <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
        <a class="inline-block" href="#">
          <img class="h-9" src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
        </a>
      </div>
      <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
        <h3 class="mb-6 font-semibold leading-normal">Product</h3>
        <ul>
          <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Careers</a></li>
          <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">About Us</a></li>
          <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Insights</a></li>
          <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">PCI Compliance</a></li>
          <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Intro Articles</a></li>
          <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
        <h3 class="mb-6 font-semibold leading-normal">For Developers</h3>
        <ul>
          <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Docs</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #303

Tailwind CSS

Flaro

<section class="relative pt-24 pb-32 bg-white overflow-hidden">
  <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="flaro-assets/images/testimonials/gradient3.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-end -m-2 mb-12">
      <div class="w-auto p-2">
        <h2 class="text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Customers love using Flaro.</h2>
      </div>
      <div class="w-auto p-2"><a class="font-sans font-medium text-indigo-600 hover:text-indigo-700 leading-10" href="#">See all our reviews</a></div>
    </div>
    <div class="flex flex-wrap -m-2">
      <div class="w-full md:w-1/2 lg:w-1/4 p-2">
        <div class="px-8 py-6 h-full bg-white bg-opacity-80 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-7 block">
              <div class="flex flex-wrap -m-0.5 mb-6">
                <div class="w-auto p-0.5">
                  <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.30769 0L12.1838 5.82662L18.6154 6.76111L13.9615 11.2977L15.0598 17.7032L9.30769 14.6801L3.55554 17.7032L4.65385 11.2977L0 6.76111L6.43162 5.82662L9.30769 0Z" fill="#F59E0B"></path>
                  </svg>
                </div>
                <div class="w-auto p-0.5">
                  <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.30769 0L12.1838 5.82662L18.6154 6.76111L13.9615 11.2977L15.0598 17.7032L9.30769 14.6801L3.55554 17.7032L4.65385 11.2977L0 6.76111L6.43162 5.82662L9.30769 0Z" fill="#F59E0B"></path>
                  </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #304

Tailwind CSS

Flaro

<section class="py-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-col justify-between h-full">
          <div class="md:max-w-md block">
            <h2 class="mb-4 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Frequently Asked Questions</h2>
            <p class="mb-12 text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo.</p>
          </div>
          <div class="block">
            <div class="mb-7 flex flex-wrap">
              <div class="w-full">
                <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block border-b border-gray-300" href="#">
                  <div class="flex flex-wrap justify-between py-7 -m-1.5">
                    <div class="flex-1 p-1.5">
                      <h3 class="text-lg font-bold font-heading leading-normal">What happens if i go over my subscription limits?</h3>
                      <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                        <p class="mt-5 text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit organizations for all,</p>
                      </div>
                    </div>
                    <div class="w-auto p-1.5">
                      <div :class="{ 'hidden': accordion }">
                        <svg class="relative top-1.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="9" cy="9" r="9" fill="#2563EB"></circle>

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

Tailwind CSS

Flaro

<section class="py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h2 class="mb-9 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Get down to your business</h2>
        <p class="mb-10 text-lg text-gray-900 font-medium leading-relaxed md:max-w-md">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
        <div class="mb-11 md:inline-block rounded-xl shadow-4xl">
          <button class="py-4 px-6 w-full text-white font-semibold border border-indigo-700 rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Learn How to Save More</button>
        </div>
        <div class="flex flex-wrap -m-2">
          <div class="w-auto p-2">
            <img class="h-10" src="flaro-assets/images/features/money-coins.png" alt="">
          </div>
          <div class="flex-1 p-2">
            <p class="text-gray-600 font-medium md:max-w-sm">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-24 py-8 md:px-8">
        <img class="w-full max-w-xl transform hover:-translate-x-16 transition ease-in-out duration-1000 rounded-2xl" src="flaro-assets/images/features/feature2.png" 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

AI Features Component Generator

Tailwind Component #306

Tailwind CSS

Flaro

<section class="relative pt-28 pb-32 bg-indigo-600 overflow-hidden">
  <img class="absolute left-1/2 top-0 transform -translate-x-1/2" src="flaro-assets/images/footers/gradient3.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="lg:max-w-sm">
          <h2 class="mb-16 text-6xl md:text-7xl text-white font-bold tracking-px-n leading-tight">Let’s talk about your project.</h2>
          <div class="md:inline-block">
            <button class="py-4 px-6 w-full text-indigo-600 font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-white hover:bg-gray-50 transition ease-in-out duration-200" type="button">Get A Free Quote</button>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap -m-8 mb-10">
          <div class="w-full sm:w-1/3 p-8">
            <ul>
              <li class="mb-3.5"><a class="text-white hover:text-gray-200 font-medium leading-relaxed" href="#">About</a></li>
              <li class="mb-3.5"><a class="text-white hover:text-gray-200 font-medium leading-relaxed" href="#">Product</a></li>
              <li class="mb-3.5"><a class="text-white hover:text-gray-200 font-medium leading-relaxed" href="#">Testimonials</a></li>
              <li><a class="text-white hover:text-gray-200 font-medium leading-relaxed" href="#">Services</a></li>
            </ul>
          </div>
          <div class="w-full sm:w-1/3 p-8">
            <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

AI Footers Component Generator

Tailwind Component #307

Tailwind CSS

Flaro

<section class="relative bg-blueGray-100 overflow-hidden">
  <img class="absolute left-0 bottom-0 h-full" src="flaro-assets/images/applications/gradient3.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full lg:w-1/2 p-8">
        <img class="relative w-full max-w-xl mx-auto lg:max-w-none transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/applications/manage.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-8 pb-24 pt-6 lg:pt-24">
        <div class="max-w-xl mx-auto md:max-w-2xl">
          <h2 class="mb-6 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Manage all from anywhere</h2>
          <p class="mb-11 text-lg text-gray-600 font-medium leading-normal md:max-w-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus sagittis nulla duis non at sed eget. Tincidunt eget tempor nunc eget</p>
          <div class="flex flex-wrap -m-2.5 mb-9">
            <div class="w-auto p-2.5">
              <a href="#">
                <img class="h-14" src="flaro-assets/images/applications/app-store.png" alt="">
              </a>
            </div>
            <div class="w-auto p-2.5">
              <a href="#">
                <img class="h-14" src="flaro-assets/images/applications/play-store.png" alt="">
              </a>
            </div>
          </div>
          <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

AI Application Component Generator

Tailwind Component #308

Tailwind CSS

Flaro

<section class="py-32 bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative bg-no-repeat bg-center bg-cover bg-fixed overflow-hidden rounded-4xl" style="height: 542px; background-image: url('flaro-assets/images/logos/bg.png');">
      <div class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50" style="backdrop-filter: blur(6px);"></div>
      <div class="absolute top-0 left-0 w-full z-10 p-16 py-20 text-center overflow-y-auto h-full">
        <h2 class="mb-5 text-6xl md:text-8xl xl:text-10xl text-white font-bold tracking-px-n leading-none">Trusted by brands</h2>
        <p class="mb-36 text-lg text-gray-200 leading-normal max-w-lg mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.</p>
        <p class="mb-4 text-sm text-white text-opacity-60 font-semibold uppercase tracking-px">Trusted and loved by 300+ tech first teams</p>
        <div class="flex flex-wrap items-center justify-center -m-5">
          <div class="w-auto p-5">
            <img class="h-9" src="flaro-assets/logos/brands/brand-large4.png" alt="">
          </div>
          <div class="w-auto p-5">
            <img class="h-9" src="flaro-assets/logos/brands/brand-large5.png" alt="">
          </div>
          <div class="w-auto p-5">
            <img class="h-9" src="flaro-assets/logos/brands/brand-large6.png" alt="">
          </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 Logo clouds Component Generator

Tailwind Component #309

Tailwind CSS

Flaro

<section class="relative pt-32 pb-24 bg-white overflow-hidden">
  <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/newsletter/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="text-center max-w-2xl mx-auto">
      <p class="mb-5 text-sm text-indigo-600 font-semibold uppercase tracking-px">Newsletter</p>
      <h2 class="mb-11 text-6xl md:text-7xl text-center font-bold font-heading tracking-px-n leading-tight">Join to get exclusive contents for free.</h2>
      <form class="mb-11 md:max-w-md mx-auto">
        <div class="mb-5">
          <input class="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border border-gray-300 rounded-lg focus:ring focus:ring-indigo-300" id="newsletterInput4-1" type="text" placeholder="Your email address">
        </div>
        <button class="py-4 px-6 w-full text-white font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Join Now</button>
      </form>
      <ul class="-m-4">
        <li class="inline-flex flex-wrap items-center p-4">
          <svg class="mr-2.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.75 9.75L6.75 12.75L14.25 5.25" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="font-medium leading-relaxed">Get weekly reports</span>
        </li>
        <li class="inline-flex flex-wrap items-center p-4">
          <svg class="mr-2.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.75 9.75L6.75 12.75L14.25 5.25" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="font-medium leading-relaxed">Unlimited free resources</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 #310

Tailwind CSS

Flaro

<section class="py-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap md:max-w-xl lg:max-w-7xl mx-auto">
      <div class="w-full md:w-1/2">
        <div class="flex flex-col justify-between h-full">
          <div class="mb-16 md:max-w-md mx-auto">
            <p class="mb-6 font-sans text-sm text-indigo-600 font-semibold uppercase">Meet The Team</p>
            <h2 class="mb-8 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">The team behind Flaro</h2>
            <p class="text-lg text-gray-600 font-medium leading-normal md:max-w-sm">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          </div>
          <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2">
              <img class="mx-auto" src="flaro-assets/images/team/team-circle3.png" alt="">
            </div>
            <div class="w-full lg:w-1/2">
              <img class="mx-auto" src="flaro-assets/images/team/team-circle4.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2">
        <div class="flex flex-col justify-end h-full">
          <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Team Component Generator

Tailwind Component #311

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-7 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Let’s see how it works</h2>
    <p class="mb-20 font-sans text-lg text-gray-900 text-center md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen tum.</p>
    <div class="relative bg-no-repeat bg-center bg-cover bg-fixed overflow-hidden rounded-4xl" style="height: 648px; background-image: url('flaro-assets/images/how-it-works/bg.png');">
      <div class="absolute top-0 left-0 p-14 md:p-20 md:pb-0 overflow-y-auto h-full">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="flex flex-wrap -m-3">
              <div class="w-auto p-3">
                <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17.5" cy="17.5" r="17.5" fill="#4F46E5"></circle>
                  <path d="M11.667 18.3333L15.0003 21.6666L23.3337 13.3333" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <img class="mx-auto" src="flaro-assets/images/how-it-works/line3.svg" alt="">
              </div>
              <div class="flex-1 p-3">
                <div class="md:max-w-xs pb-8">
                  <p class="mb-5 text-sm text-gray-400 font-semibold uppercase tracking-px">Step 1</p>
                  <h3 class="mb-2 text-xl text-white font-bold leading-normal">Choose A Package</h3>
                  <p class="text-gray-300 font-medium leading-relaxed">Lorem ipsum dolor sit amet, to the consectetur adipiscing elit.</p>
                </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 How it works Component Generator

Tailwind Component #312

Tailwind CSS

Flaro

<section class="py-28 bg-black bg-no-repeat bg-center bg-cover bg-fixed overflow-hidden" style="background-image: url('flaro-assets/images/blog/bg.jpeg');">
  <div class="container px-4 mx-auto">
    <div class="px-12 pt-12 pb-9 md:max-w-xl bg-black bg-opacity-80 rounded-4xl" style="backdrop-filter: blur(10px);">
      <p class="mb-7 font-sans max-w-max px-3 py-1.5 text-sm text-white font-semibold uppercase border border-gray-700 rounded-md">Business</p>
      <h2 class="mb-4 text-6xl md:text-7xl text-white font-bold font-heading tracking-px-n leading-tight">How to handle your good employee for the business.</h2>
      <p class="mb-11 text-lg text-gray-400 font-medium leading-normal">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condim entum vitae vel purus.</p>
      <a class="inline-flex flex-wrap items-center text-white hover:text-gray-200" href="#">
        <span class="mr-2 font-semibold leading-normal">Read Full Article</span>
        <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 3.75L16.25 9M16.25 9L11 14.25M16.25 9L2.75 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </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 Blog Component Generator

Tailwind Component #313

Tailwind CSS

Flaro

<section class="py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap max-w-7xl mx-auto -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="mb-8 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Numbers telling the story</h2>
          <p class="text-lg text-gray-600 font-medium leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="relative max-w-md mx-auto overflow-hidden transform hover:-translate-y-4 transition ease-in-out duration-1000 rounded-2xl">
          <img class="object-cover h-full w-full" src="flaro-assets/images/numbers/bg.png" alt="">
          <div class="absolute bottom-0 p-6 flex flex-col justify-end h-full">
            <div class="flex flex-wrap items-end overflow-y-auto -m-3">
              <div class="w-full p-3">
                <div class="p-7 bg-indigo-600 bg-opacity-80 rounded-xl" style="backdrop-filter: blur(20px);">
                  <div class="flex flex-wrap -m-2">
                    <div class="w-auto p-2">
                      <h3 class="text-5xl text-white font-bold tracking-px-n leading-tight">3M+</h3>
                    </div>
                    <div class="flex-1 p-2">
                      <p class="text-lg text-white font-semibold leading-normal">Transactions over the period of 2022</p>
                    </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 Stats Component Generator

Tailwind Component #314

Tailwind CSS

Flaro

<section class="relative py-36 bg-black overflow-hidden">
  <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/sign-up/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="mb-8 p-12 max-w-xl mx-auto border border-gray-800 rounded-4xl">
      <h2 class="mb-3 text-5xl text-white text-center font-bold font-heading leading-tight tracking-px-n">Sign up</h2>
      <p class="mb-6 pb-11 font-medium text-center text-lg text-gray-400 leading-normal border-b border-gray-900">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      <form>
        <label class="block mb-4">
          <p class="mb-2 text-white font-semibold leading-normal">Full Name</p>
          <input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-transparent outline-none border border-gray-800 rounded-lg focus:ring focus:ring-indigo-300" id="signUpInput4-1" type="text" placeholder="First &amp; last name">
        </label>
        <label class="block mb-4">
          <p class="mb-2 text-white font-semibold leading-normal">Email Address</p>
          <input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-transparent outline-none border border-gray-800 rounded-lg focus:ring focus:ring-indigo-300" id="signUpInput4-2" type="text" placeholder="Enter email address">
        </label>
        <label class="block mb-4">
          <p class="mb-2 text-white font-semibold leading-normal">Password</p>
          <input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-transparent outline-none border border-gray-800 rounded-lg focus:ring focus:ring-indigo-300" id="signUpInput4-3" type="password" placeholder="********">
        </label>
        <div class="flex flex-wrap justify-between mb-4">
          <div class="w-full">
            <div class="flex flex-wrap">
              <input class="relative top-1 w-4 h-4" id="default-checkbox" type="checkbox" value="">
              <label class="flex-1 ml-2 text-sm text-white font-medium" for="default-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

AI Sign in / Sign up Component Generator

Tailwind Component #315

Tailwind CSS

Flaro

<section class="pt-24 pb-28 bg-blueGray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-24 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight md:max-w-xl mx-auto">Choose a plan that suits you. Grow business fast.</h2>
    <div class="mb-24 md:max-w-6xl mx-auto">
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/3 p-4">
          <div class="flex flex-col px-9 pt-8 pb-9 h-full bg-white bg-opacity-90 border-blueGray-100 rounded-4xl" style="backdrop-filter: blur(46px);">
            <div>
              <span class="mb-9 inline-block text-sm text-indigo-600 font-semibold uppercase tracking-px leading-snug">Basic</span>
              <h3 class="mb-1 text-4xl text-gray-900 font-bold leading-none">Free</h3>
              <p class="mb-6 text-sm text-gray-600 font-medium leading-relaxed">No credit card required</p>
              <p class="mb-9 text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Egestas lacus, blan dit pellentesque.</p>
            </div>
            <button class="py-4 px-9 w-full font-semibold border border-blueGray-300 hover:border-blueGray-400 rounded-xl focus:ring focus:ring-gray-50 bg-white hover:bg-gray-50 transition ease-in-out duration-200" type="button">Get Started Now</button>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
          <div class="relative flex flex-col px-9 pt-8 pb-9 h-full bg-white bg-opacity-90 border-blueGray-100 rounded-4xl shadow-9xl" style="backdrop-filter: blur(46px);">
            <img class="absolute -top-11 -right-8 h-20 z-10" src="flaro-assets/images/pricing/popular.png" alt="">
            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-full rounded-4xl" src="flaro-assets/images/pricing/gradient3.svg" alt="">
            <div class="relative z-10">
              <span class="mb-9 inline-block text-sm text-indigo-600 font-semibold uppercase tracking-px leading-snug">Standard</span>
              <h3 class="mb-1 text-4xl text-gray-900 font-bold leading-none">$19/mo</h3>
              <p class="mb-6 text-sm text-gray-600 font-medium leading-relaxed">Billed 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 Pricing Component Generator

Tailwind Component #316

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 text-center md:max-w-xl mx-auto">
      <h2 class="mb-4 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Our Contacts</h2>
      <p class="text-lg text-gray-600 font-medium leading-normal md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum.</p>
    </div>
    <div class="flex flex-wrap xl:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-max mx-auto overflow-hidden rounded-3xl">
          <img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/contact/man.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <p class="mb-4 text-sm font-bold uppercase tracking-px">Email</p>
        <ul class="mb-12">
          <li class="text-lg text-gray-600 font-medium leading-normal">info@email.com</li>
          <li class="text-lg text-gray-600 font-medium leading-normal">support@gmail.com</li>
        </ul>
        <p class="mb-4 text-sm font-bold uppercase tracking-px">Phone</p>
        <ul class="mb-14">
          <li class="text-lg text-gray-600 font-medium leading-normal">+1 840 841 25 69</li>
          <li class="text-lg text-gray-600 font-medium leading-normal">+1 840 841 25 69</li>
        </ul>
        <p class="mb-4 text-sm font-bold uppercase tracking-px">Address</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 Contact Component Generator

Tailwind Component #317

Tailwind CSS

Flaro

<section class="relative pt-24 md:pb-28 lg:pt-0 lg:pb-0 bg-black overflow-hidden">
  <img class="absolute bottom-0 right-0" src="flaro-assets/images/cta/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-lg">
          <h2 class="mb-6 text-6xl md:text-7xl text-white font-bold tracking-px-n leading-tight">Join &amp; get 30% discount right now</h2>
          <p class="mb-8 text-white text-opacity-70 font-medium md:max-w-md">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2">
              <button class="py-4 px-6 w-full font-medium rounded-xl shadow-6xl focus:ring focus:ring-gray-300 bg-white hover:bg-gray-100 transition ease-in-out duration-200" type="button">Try 30 days free trial</button>
            </div>
            <div class="w-full md:w-auto p-2">
              <button class="inline-flex items-center justify-center py-4 px-6 w-full text-white font-medium border border-white border-opacity-20 hover:border-opacity-40 rounded-xl focus:ring focus:ring-white focus:ring-opacity-40 bg-transparent hover:bg-black hover:bg-opacity-5 transition ease-in-out duration-200" type="button">
                <svg class="mr-2.5" width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.75 3.75C2.75 2.92157 3.42157 2.25 4.25 2.25H6.70943C7.03225 2.25 7.31886 2.45657 7.42094 2.76283L8.5443 6.13291C8.66233 6.48699 8.50203 6.87398 8.1682 7.0409L6.47525 7.88737C7.30194 9.72091 8.77909 11.1981 10.6126 12.0247L11.4591 10.3318C11.626 9.99796 12.013 9.83767 12.3671 9.9557L15.7372 11.0791C16.0434 11.1811 16.25 11.4677 16.25 11.7906V14.25C16.25 15.0784 15.5784 15.75 14.75 15.75H14C7.7868 15.75 2.75 10.7132 2.75 4.5V3.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span>Book a call</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-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 Call to action Component Generator

Tailwind Component #318

Tailwind CSS

Flaro

<section class="relative py-36 bg-black overflow-hidden">
  <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/sign-up/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="mb-8 p-12 max-w-xl mx-auto border border-gray-800 rounded-4xl">
      <h2 class="mb-3 text-5xl text-white text-center font-semibold leading-tight">Login to Flaro</h2>
      <p class="mb-11 pb-11 font-medium text-center text-lg text-gray-400 leading-normal border-b border-gray-900">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      <form>
        <label class="block mb-4">
          <p class="mb-2 text-white font-semibold leading-normal">Email Address</p>
          <input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-transparent outline-none border border-gray-800 rounded-lg focus:ring focus:ring-indigo-300" id="signInInput4-1" type="text" placeholder="Enter email address">
        </label>
        <label class="block mb-4">
          <p class="mb-2 text-white font-semibold leading-normal">Password</p>
          <input class="px-4 py-3.5 w-full text-gray-400 font-medium placeholder-gray-400 bg-transparent outline-none border border-gray-800 rounded-lg focus:ring focus:ring-indigo-300" id="signInInput4-2" type="password" placeholder="********">
        </label>
        <div class="flex flex-wrap justify-between -m-2 mb-4">
          <div class="w-auto p-2">
            <div class="flex items-center">
              <input class="w-4 h-4" id="default-checkbox" type="checkbox" value="">
              <label class="ml-2 text-sm text-white font-medium" for="default-checkbox">Remember Me</label>
            </div>
          </div>
          <div class="w-auto p-2"><a class="text-sm text-indigo-600 hover:text-indigo-700 font-medium" href="#">Forgot Password?</a></div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #319

Tailwind CSS

Flaro

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-7 xl:px-40 py-5 lg:py-7 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14">
          <a href="#">
            <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-16">
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Features</a></li>
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Solutions</a></li>
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Resources</a></li>
            <li class="font-medium hover:text-gray-700"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-indigo-600" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #320

Tailwind CSS

Flaro

<section class="relative py-20 bg-gray-50 overflow-hidden">
  <img class="absolute left-1/2 bottom-0 transform -translate-x-1/2" src="flaro-assets/images/http-codes/gradient3.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="p-12 md:max-w-xl mx-auto text-center bg-white bg-opacity-80 rounded-4xl shadow-13xl">
      <img class="max-w-sm mx-auto mb-4 h-64 transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/http-codes/404.png" alt="">
      <p class="mb-32 text-sm text-gray-400 text-center font-semibold uppercase tracking-px">The page you are looking for is not found</p>
      <h3 class="mb-4 text-2xl font-bold font-heading leading-snug">Try another page</h3>
      <p class="mb-10 text-gray-600 font-medium leading-relaxed md:max-w-sm mx-auto">Lorem ipsum dolor sit amet consectrtur. Volutpat tempor condimentum vitae vel pur.</p>
      <a class="inline-flex flex-wrap justify-center items-center text-center font-semibold text-indigo-600 hover:text-indigo-700 leading-normal" href="#">
        <svg class="mr-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.66667 12.6667L2 8.00004M2 8.00004L6.66667 3.33337M2 8.00004L14 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span>Go Back to Homepage</span>
      </a>
    </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 HTTP codes 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 #301

Get the code for 13,400+ components

Tailwind Component #302

Get the code for 13,400+ components

Tailwind Component #303

Get the code for 13,400+ components

Tailwind Component #304

Get the code for 13,400+ components

Tailwind Component #305

Get the code for 13,400+ components

Tailwind Component #306

Get the code for 13,400+ components

Tailwind Component #307

Get the code for 13,400+ components

Tailwind Component #308

Get the code for 13,400+ components

Tailwind Component #309

Get the code for 13,400+ components

Tailwind Component #310

Get the code for 13,400+ components

Tailwind Component #311

Get the code for 13,400+ components

Tailwind Component #312

Get the code for 13,400+ components

Tailwind Component #313

Get the code for 13,400+ components

Tailwind Component #314

Get the code for 13,400+ components

Tailwind Component #315

Get the code for 13,400+ components

Tailwind Component #316

Get the code for 13,400+ components

Tailwind Component #317

Get the code for 13,400+ components

Tailwind Component #318

Get the code for 13,400+ components

Tailwind Component #319

Get the code for 13,400+ components

Tailwind Component #320

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support