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

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-4 text-6xl md:text-7xl text-center font-bold font-heading tracking-px-n leading-tight">Featured Jobs</h2>
    <p class="mb-12 text-gray-600 text-center font-medium leading-relaxed md:max-w-md mx-auto">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae.</p>
    <div class="md:max-w-2xl mx-auto">
      <div class="flex flex-wrap -m-1.5">
        <div class="w-full p-1.5">
          <a class="group" href="#">
            <div class="p-5 h-full bg-white border group-hover:border-gray-300 rounded-xl">
              <div class="flex flex-wrap justify-between items-center -m-2">
                <div class="w-auto p-2">
                  <p class="inline-block mb-3 px-2.5 py-1 text-xs text-indigo-600 font-medium bg-indigo-50 uppercase rounded-md">Design</p>
                  <h3 class="mb-2.5 text-xl font-bold font-heading leading-snug">Product Design</h3>
                  <p class="text-sm text-gray-600 font-medium">
                    <span>Remote</span>
                    <span class="px-2">•</span>
                    <span>Full Time</span>
                  </p>
                </div>
                <div class="w-auto p-2">
                  <div class="flex items-center justify-center w-11 h-11 bg-indigo-600 group-hover:bg-indigo-700 rounded-full">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.33333 3.33337L14 8.00004M14 8.00004L9.33333 12.6667M14 8.00004L2 8.00004" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></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 Careers Component Generator

Tailwind Component #322

Tailwind CSS

Flaro

<section x-data="{ toggle: false }" class="pt-24 pb-32 bg-blueGray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-6 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Try Flaro, Grow Fast</h2>
    <div class="mb-16 flex flex-wrap justify-between -m-4">
      <div class="w-auto p-4">
        <div class="md:max-w-md">
          <p class="text-lg text-gray-900 font-medium leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen tum.</p>
        </div>
      </div>
      <div class="w-auto p-4">
        <div class="inline-flex items-center max-w-max">
          <p class="text-gray-600 font-medium leading-relaxed">Monthly</p>
          <a x-on:click.prevent="toggle = !toggle" class="mx-3" href="#">
            <div class="p-0.5 w-9 h-5 bg-indigo-600 rounded-full">
              <div class="relative">
                <div :class="{'left-4': toggle }" class="absolute left-0 w-4 h-4 bg-white rounded-full transition-all duration-200"></div>
              </div>
            </div>
          </a>
          <p class="text-gray-600 font-medium leading-relaxed">
            <span>Yearly</span>
            <span class="text-indigo-600 font-semibold">(Save 25%)</span>
          </p>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #323

Tailwind CSS

Flaro

<section class="relative py-16 bg-white overflow-hidden">
  <img class="absolute top-0 left-0 h-full" src="flaro-assets/images/footers/gradient4.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-center -m-8">
      <div class="w-auto p-8">
        <a href="#">
          <img class="h-8" src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
        </a>
      </div>
      <div class="w-auto p-8">
        <ul class="flex flex-wrap items-center -m-5">
          <li class="p-5"><a class="text-gray-600 hover:text-gray-700 font-medium" href="#">About</a></li>
          <li class="p-5"><a class="text-gray-600 hover:text-gray-700 font-medium" href="#">Leadership</a></li>
          <li class="p-5"><a class="text-gray-600 hover:text-gray-700 font-medium" href="#">Press/News</a></li>
          <li class="p-5"><a class="text-gray-600 hover:text-gray-700 font-medium" href="#">Careers/Team</a></li>
          <li class="p-5"><a class="text-gray-600 hover:text-gray-700 font-medium" href="#">Contact Us</a></li>
        </ul>
      </div>
      <div class="w-auto p-8">
        <div class="flex flex-wrap -m-1.5">
          <div class="w-auto p-1.5">
            <a href="#">
              <div class="flex items-center justify-center w-8 h-8 border border-gray-300 hover:border-gray-400 rounded-full">
                <svg width="8" height="14" viewBox="0 0 8 14" 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 Footers Component Generator

Tailwind Component #324

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-5 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">See what others are saying</h2>
    <p class="mb-16 text-lg text-gray-600 font-medium text-center mx-auto md:max-w-xl">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam.</p>
    <div class="flex flex-nowrap justify-center -m-1.5 mb-1.5">
      <div class="flex-shrink-0 max-w-xs p-1.5">
        <div class="p-6 h-full bg-white">
          <div class="flex flex-col justify-between h-full">
            <div class="pb-6">
              <div class="flex flex-wrap -m-0.5 mb-5">
                <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>
                </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 #325

Tailwind CSS

Flaro

<section class="pt-32 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="inline-block mb-7 px-2 py-1 text-sm font-semibold bg-green-100 rounded-full">
        <div class="flex flex-wrap items-center -m-1">
          <div class="w-auto p-1">
            <p>👋 We are hiring . View open roles</p>
          </div>
          <div class="w-auto p-1">
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.66667 3.41675L12.75 7.50008M12.75 7.50008L8.66667 11.5834M12.75 7.50008L2.25 7.50008" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
      <h2 class="mb-6 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">The team behind Flaro</h2>
      <p class="mb-16 text-lg text-gray-600 font-medium">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/3 p-4">
          <div class="max-w-max mx-auto h-full overflow-hidden rounded-3xl">
            <img class="h-full w-full object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/people.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/3 p-4">

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

Tailwind CSS

Flaro

<section class="pt-28 pb-40 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-20 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">The difference is clear.</h2>
    <div class="flex flex-wrap xl:items-center -m-8 xl:-m-10">
      <div class="w-full md:w-1/2 xl:w-1/3 p-8 xl:p-10">
        <a class="block overflow-hidden rounded-3xl" href="#">
          <img class="w-full h-96 transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/features/video.png" alt="">
        </a>
      </div>
      <div class="w-full md:w-1/2 xl:w-2/3 p-8 xl:p-10">
        <div class="md:max-w-xl">
          <div class="mb-11 pb-32 border-b">
            <h3 class="text-lg font-semibold md:max-w-lg">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</h3>
          </div>
          <div class="flex flex-wrap -m-8">
            <div class="w-auto md:w-1/2 p-8">
              <div class="md:max-w-xs">
                <h3 class="mb-4 text-lg text-indigo-600 font-semibold">Unlimited Meetings</h3>
                <p class="text-gray-900 font-medium">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
              </div>
            </div>
            <div class="w-auto md:w-1/2 p-8">
              <div class="md:max-w-xs">
                <h3 class="mb-4 text-lg text-indigo-600 font-semibold">Hybrid Collaboration</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 Features Component Generator

Tailwind Component #327

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 bg-black">
    <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-light.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 text-white hover:text-gray-200"><a href="#">Features</a></li>
            <li class="mr-9 font-medium text-white hover:text-gray-200"><a href="#">Solutions</a></li>
            <li class="mr-9 font-medium text-white hover:text-gray-200"><a href="#">Resources</a></li>
            <li class="font-medium text-white hover:text-gray-200"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <div class="inline-block">
            <button class="py-3 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>

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

Tailwind CSS

Flaro

<section class="pt-28 pb-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="text-15xl md:text-16xl xl:text-17xl text-red-500 text-center font-bold font-heading transform -rotate-3 tracking-px-2n">oops!</h2>
    <h3 class="mb-52 text-4xl text-center font-bold font-heading leading-tight">Page not found</h3>
    <p class="mb-10 text-xl text-gray-700 text-center font-medium leading-relaxed md:max-w-md mx-auto">Sorry, but the requested page is not found. You might try a search below.</p>
    <div class="relative md:max-w-xl mx-auto">
      <svg class="absolute top-1/2 left-4 transform -translate-y-1/2" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.5 18.0923L12.5 13.0923M14.1667 8.92562C14.1667 12.1473 11.555 14.759 8.33333 14.759C5.11167 14.759 2.5 12.1473 2.5 8.92562C2.5 5.70396 5.11167 3.09229 8.33333 3.09229C11.555 3.09229 14.1667 5.70396 14.1667 8.92562Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <input class="pl-12 pr-4 py-3 w-full text-gray-500 font-medium placeholder-gray-500 outline-none border-b border-gray-300 focus:ring focus:ring-indigo-300" id="httpCodeInput5-1" type="text" placeholder="Type to search">
    </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

Tailwind Component #329

Tailwind CSS

Flaro

<section class="relative pt-24 lg:pt-0 bg-white overflow-hidden">
  <img class="absolute left-0 top-0 w-full h-full" src="flaro-assets/images/applications/gradient4.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 md:w-1/2 p-8">
        <div class="md:max-w-2xl">
          <h2 class="mb-8 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Connect with customers.</h2>
          <p class="mb-9 text-lg text-gray-600 font-medium leading-normal md:max-w-md">Lorem ipsum dolor sit amet, consectetur adipis cing elit. Risus sagittis nulla duis non at sed eget. Tincidunt eget tempor nunc eget</p>
          <div class="md:inline-block">
            <button class="inline-flex flex-wrap items-center justify-center py-4 px-6 w-full text-white font-semibold border border-indigo-700 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">
              <svg class="mr-3" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 7.66667L7 9.66667M7 9.66667L5 7.66667M7 9.66667L7 4.33333M7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 10.3137 10.3137 13 7 13Z" stroke="#F9FAFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span>Download Mobile App</span>
            </button>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8 self-end">
        <img class="mx-auto transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/applications/scene.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 Application Component Generator

Tailwind Component #330

Tailwind CSS

Flaro

<section class="relative pt-28 pb-36 bg-blueGray-100 overflow-hidden">
  <div class="relative z-10 container px-4 mx-auto">
    <p class="mb-6 text-sm text-indigo-600 text-center font-semibold uppercase tracking-px">Contact us</p>
    <h2 class="mb-14 text-6xl md:text-7xl text-center font-bold font-heading tracking-px-n leading-tight md:max-w-xl mx-auto">Have Some Questions? Let’s Get Connected</h2>
    <form class="px-11 pt-9 pb-11 bg-white bg-opacity-80 md:max-w-xl mx-auto rounded-4xl shadow-12xl" style="backdrop-filter: blur(5px);">
      <h3 class="mb-8 text-xl text-center font-semibold leading-normal md:max-w-sm mx-auto">Send us a message to know more about us or just chit-chat.</h3>
      <label class="block mb-4">
        <input class="px-4 py-3 w-full text-gray-500 font-medium placeholder-gray-500 bg-white bg-opacity-50 outline-none border border-blueGray-200 rounded-lg focus:ring focus:ring-indigo-300" id="contactInput5-1" type="text" placeholder="First &amp; last name">
      </label>
      <label class="block mb-4">
        <input class="px-4 py-3 w-full text-gray-500 font-medium placeholder-gray-500 bg-white bg-opacity-50 outline-none border border-blueGray-200 rounded-lg focus:ring focus:ring-indigo-300" id="contactInput5-2" type="text" placeholder="First &amp; last name">
      </label>
      <label class="block mb-4"><textarea class="p-4 w-full h-48 font-medium text-gray-500 placeholder-gray-500 bg-white bg-opacity-50 outline-none border border-blueGray-200 resize-none rounded-lg focus:ring focus:ring-indigo-300" id="contactInput3-3" placeholder="Write message"></textarea></label>
      <button class="py-4 px-9 w-full text-white font-semibold border border-indigo-700 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">Send Message</button>
    </form>
  </div>
  <img class="absolute bottom-0 w-full object-cover transform hover:translate-y-4 transition ease-in-out duration-1000" style="height: 502px;" src="flaro-assets/images/contact/people.jpeg" 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 Contact Component Generator

Tailwind Component #331

Tailwind CSS

Flaro

<section class="py-24 bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap max-w-5xl mx-auto -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="py-8 px-12 h-full text-center bg-white rounded-xl">
          <h2 class="mb-3 text-6xl md:text-8xl xl:text-10xl text-indigo-600 text-center font-bold font-heading tracking-px-n leading-none">41,300+</h2>
          <p class="text-gray-700 font-medium leading-relaxed">Flaro has garnered more than 15k+ users.</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="py-8 px-12 h-full text-center bg-white rounded-xl">
          <h2 class="mb-3 text-6xl md:text-8xl xl:text-10xl text-indigo-600 text-center font-bold font-heading tracking-px-n leading-none">83k</h2>
          <p class="text-gray-700 font-medium leading-relaxed">Flaro has garnered more than 15k+ users.</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="py-8 px-12 h-full text-center bg-white rounded-xl">
          <h2 class="mb-3 text-6xl md:text-8xl xl:text-10xl text-indigo-600 text-center font-bold font-heading tracking-px-n leading-none">2019</h2>
          <p class="text-gray-700 font-medium leading-relaxed">Flaro has garnered more than 15k+ users.</p>
        </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 Stats Component Generator

Tailwind Component #332

Tailwind CSS

Flaro

<section class="relative py-32 white overflow-hidden">
  <img class="hidden 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 lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <img class="max-w-lg mx-auto transform hover:translate-x-16 transition ease-in-out duration-1000 rounded-lg" src="flaro-assets/images/cta/people.png" alt="">
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="relative md:max-w-xl">
          <img class="absolute top-0 right-0 h-full w-full" src="flaro-assets/images/cta/gradient3.svg" alt="">
          <div class="relative z-10">
            <h2 class="mb-11 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Join &amp; build your startup successful</h2>
            <div class="md:max-w-lg">
              <div class="flex flex-wrap -m-2 mb-3">
                <div class="w-auto p-2">
                  <svg class="mt-1" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="10" cy="10" r="10" fill="#4F46E5"></circle>
                    <path d="M6 10.6667L8.66667 13.3333L14 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="flex-1 p-2">
                  <p class="font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat enim.</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 Call to action Component Generator

Tailwind Component #333

Tailwind CSS

Flaro

<section class="pt-24 pb-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-5 text-6xl md:text-7xl text-center font-bold font-heading tracking-px-n leading-tight">How Flaro Works</h2>
    <p class="mb-20 text-lg text-gray-900 text-center font-medium md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen tum.</p>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8">
        <div class="relative text-center">
          <img class="absolute -right-40 top-8" src="flaro-assets/images/how-it-works/line4.svg" alt="">
          <div class="relative w-14 h-14 mb-10 mx-auto text-2xl font-bold font-heading bg-indigo-100 rounded-full">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.5391 21L15.5391 15M17.5391 10C17.5391 13.866 14.4051 17 10.5391 17C6.67307 17 3.53906 13.866 3.53906 10C3.53906 6.13401 6.67307 3 10.5391 3C14.4051 3 17.5391 6.13401 17.5391 10Z" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <div class="md:max-w-xs mx-auto">
            <h3 class="mb-5 font-heading text-xl font-bold font-heading leading-normal">Choose Package</h3>
            <p class="font-sans text-gray-600">Lorem ipsum dolor sit amet, consec tetur adipiscing elit volutpat.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <div class="relative text-center">
          <img class="absolute -right-40 top-8" src="flaro-assets/images/how-it-works/line4.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

AI How it works Component Generator

Tailwind Component #334

Tailwind CSS

Flaro

<section class="relative py-32 bg-white overflow-hidden">
  <img class="absolute right-0 bottom-0" src="flaro-assets/images/pricing/gradient6.svg" alt="">
  <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 md:max-w-md">
          <div>
            <h2 class="mb-8 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Affordable pricing plans</h2>
            <p class="mb-16 font-medium text-gray-600 leading-relaxed">Amet minim mollit non deserunt ullamco an aliqua dolor elit officia consequat duis.Amet minim mollit non deserunt ullamco est sit aliqua.</p>
          </div>
          <div>
            <h3 class="mb-3 text-gray-900 font-semibold">Trusted by 1M+ customers</h3>
            <div class="flex flex-wrap items-center -m-1">
              <div class="w-auto p-1">
                <div class="flex flex-wrap -m-0.5">
                  <div class="w-auto p-0.5">
                    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></path>
                    </svg>
                  </div>
                  <div class="w-auto p-0.5">
                    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></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 Pricing Component Generator

Tailwind Component #335

Tailwind CSS

Flaro

<section class="pt-24 pb-32 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="md:max-w-lg">
          <h2 class="mb-14 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Three easy steps</h2>
          <div class="flex flex-wrap -m-5 mb-9">
            <div class="w-full p-5">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <div class="relative mb-3 w-16 h-16 text-lg text-indigo-600 font-bold border border-gray-200 rounded-full">
                    <img class="absolute top-0 left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
                    <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">1</span>
                  </div>
                </div>
                <div class="flex-1 p-4">
                  <div class="md:max-w-xs">
                    <h3 class="mb-3 text-xl font-semibold leading-normal">Connect your data</h3>
                    <p class="text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor amet adipiscing or elit. Volutpat tempor mentum.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full p-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 How it works Component Generator

Tailwind Component #336

Tailwind CSS

Flaro

<section class="relative pt-24 pb-28 bg-white overflow-hidden">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/cta/gradient4.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-auto p-8">
        <a href="#">
          <img class="w-56 mx-auto transform hover:translate-y-4 transition ease-in-out duration-1000 rounded-lg" src="flaro-assets/images/cta/man-play.png" alt="">
        </a>
      </div>
      <div class="w-full md:flex-1 p-8">
        <div class="md:max-w-2xl mx-auto text-center">
          <h2 class="mb-10 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">Free for 14 days. Try everything, it’s on us</h2>
          <div class="mb-12 md:inline-block">
            <button class="py-4 px-6 w-full text-white font-semibold border border-indigo-700 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">Try 30 Days Free Trial</button>
          </div>
          <div class="md:max-w-sm mx-auto">
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <svg class="mt-1" width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 20V14.2777C0 12.6321 0.306867 10.921 0.920601 9.14446C1.55293 7.34923 2.40844 5.65685 3.48712 4.06732C4.58441 2.45909 5.81187 1.10332 7.16953 0L11.8562 3.0575C10.7589 4.72183 9.83834 6.46096 9.09442 8.2749C8.3691 10.0701 8.01574 12.0524 8.03433 14.2216V20H0ZM14.1438 20V14.2777C14.1438 12.6321 14.4506 10.921 15.0644 9.14446C15.6967 7.34923 16.5522 5.65685 17.6309 4.06732C18.7282 2.45909 19.9557 1.10332 21.3133 0L26 3.0575C24.9027 4.72183 23.9821 6.46096 23.2382 8.2749C22.5129 10.0701 22.1595 12.0524 22.1781 14.2216V20H14.1438Z" fill="#E0E7FF"></path>
                </svg>
              </div>
              <div class="flex-1 p-2">
                <p class="mb-4 text-lg font-medium leading-normal text-left">Ease of use and efficiency of design tools. The ability for the team to see all of a project.</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 Call to action Component Generator

Tailwind Component #337

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-4 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Customers love using Flaro.</h2>
    <p class="mb-20 text-lg text-gray-900 font-medium">Over 195 Flaro users have shared their experiences.</p>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap sm:items-center -m-4">
          <div class="w-full sm:w-auto p-4">
            <a class="inline-block max-w-max mx-auto overflow-hidden rounded-xl" href="#">
              <img class="w-64 h-48 object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/testimonials/customer.png" alt="">
            </a>
          </div>
          <div class="w-full sm:flex-1 p-4">
            <div class="sm:w-64">
              <h3 class="mb-4 text-lg font-bold font-heading leading-snug">“We love it.”</h3>
              <p class="mb-4 font-medium leading-relaxed">Very very easy for customer information to get breached if all orders are on one device.</p>
              <h3 class="font-bold font-heading">Jenny Wilson</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap sm:items-center -m-4">
          <div class="w-full sm:w-auto p-4">

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

Tailwind CSS

Flaro

<section class="py-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-20 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">The brain behind Flaro team</h2>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -m-3">
        <div class="w-full md:w-1/3 p-3">
          <div class="max-w-max mx-auto">
            <div class="mb-6 max-w-max overflow-hidden rounded-3xl">
              <img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/bg-square.png" alt="">
            </div>
            <h3 class="mb-1 text-lg font-bold font-heading leading-snug">Marvin McKinney</h3>
            <p class="font-medium text-gray-600">Co-Founder, Flaro</p>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-3">
          <div class="max-w-max mx-auto">
            <div class="mb-6 max-w-max overflow-hidden rounded-3xl">
              <img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/bg-square2.png" alt="">
            </div>
            <h3 class="mb-1 text-lg font-bold font-heading leading-snug">Jacob Jones</h3>
            <p class="font-medium text-gray-600">Co-Founder, Flaro</p>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-3">

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

Tailwind CSS

Flaro

<section class="pt-32 pb-36 bg-indigo-600 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-2xl">
      <h2 class="mb-9 text-6xl md:text-8xl xl:text-10xl text-white font-bold tracking-px-n leading-none">Take full control of design &amp; development</h2>
      <p class="mb-36 text-white text-opacity-70">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>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
        <div class="p-7 bg-white border border-gray-900 rounded-3xl">
          <div class="flex flex-wrap -m-4">
            <div class="w-auto p-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.66669 5.83329C4.66669 5.18896 5.18902 4.66663 5.83335 4.66663H22.1667C22.811 4.66663 23.3334 5.18896 23.3334 5.83329V8.16663C23.3334 8.81096 22.811 9.33329 22.1667 9.33329H5.83335C5.18902 9.33329 4.66669 8.81096 4.66669 8.16663V5.83329Z" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.66669 15.1666C4.66669 14.5223 5.18902 14 5.83335 14H12.8334C13.4777 14 14 14.5223 14 15.1666V22.1666C14 22.811 13.4777 23.3333 12.8334 23.3333H5.83335C5.18902 23.3333 4.66669 22.811 4.66669 22.1666V15.1666Z" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M18.6667 15.1666C18.6667 14.5223 19.189 14 19.8334 14H22.1667C22.811 14 23.3334 14.5223 23.3334 15.1666V22.1666C23.3334 22.811 22.811 23.3333 22.1667 23.3333H19.8334C19.189 23.3333 18.6667 22.811 18.6667 22.1666V15.1666Z" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="flex-1 p-4">
              <h3 class="mb-3 text-lg font-semibold">Unlimited Resources</h3>
              <p class="text-gray-600 font-medium">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercit ation veniam consequat.</p>
            </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

AI Features Component Generator

Tailwind Component #340

Tailwind CSS

Flaro

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-7 py-5 bg-black">
    <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-light.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 text-white hover:text-gray-200"><a href="#">Features</a></li>
            <li class="mr-9 font-medium text-white hover:text-gray-200"><a href="#">Solutions</a></li>
            <li class="mr-9 font-medium text-white hover:text-gray-200"><a href="#">Resources</a></li>
            <li class="font-medium text-white hover:text-gray-200"><a href="#">Pricing</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-auto">

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

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

Get the code for 13,400+ components

Tailwind Component #322

Get the code for 13,400+ components

Tailwind Component #323

Get the code for 13,400+ components

Tailwind Component #324

Get the code for 13,400+ components

Tailwind Component #325

Get the code for 13,400+ components

Tailwind Component #326

Get the code for 13,400+ components

Tailwind Component #327

Get the code for 13,400+ components

Tailwind Component #328

Get the code for 13,400+ components

Tailwind Component #329

Get the code for 13,400+ components

Tailwind Component #330

Get the code for 13,400+ components

Tailwind Component #331

Get the code for 13,400+ components

Tailwind Component #332

Get the code for 13,400+ components

Tailwind Component #333

Get the code for 13,400+ components

Tailwind Component #334

Get the code for 13,400+ components

Tailwind Component #335

Get the code for 13,400+ components

Tailwind Component #336

Get the code for 13,400+ components

Tailwind Component #337

Get the code for 13,400+ components

Tailwind Component #338

Get the code for 13,400+ components

Tailwind Component #339

Get the code for 13,400+ components

Tailwind Component #340

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