Tailwind Components in Flaro 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 #41

Tailwind CSS

Flaro

<section class="py-24 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/3 p-8">
        <div class="md:max-w-xs mx-auto text-center">
          <div class="flex justify-center mb-6 -m-1">
            <div class="w-auto p-1">
              <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 0L15.708 7.512L24 8.7168L18 14.5656L19.416 22.824L12 18.9264L4.584 22.824L6 14.5656L0 8.7168L8.292 7.512L12 0Z" fill="#4F46E5"></path>
              </svg>
            </div>
            <div class="w-auto p-1">
              <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 0L15.708 7.512L24 8.7168L18 14.5656L19.416 22.824L12 18.9264L4.584 22.824L6 14.5656L0 8.7168L8.292 7.512L12 0Z" fill="#4F46E5"></path>
              </svg>
            </div>
            <div class="w-auto p-1">
              <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 0L15.708 7.512L24 8.7168L18 14.5656L19.416 22.824L12 18.9264L4.584 22.824L6 14.5656L0 8.7168L8.292 7.512L12 0Z" fill="#4F46E5"></path>
              </svg>
            </div>
            <div class="w-auto p-1">
              <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 0L15.708 7.512L24 8.7168L18 14.5656L19.416 22.824L12 18.9264L4.584 22.824L6 14.5656L0 8.7168L8.292 7.512L12 0Z" fill="#4F46E5"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Three-column five-star testimonial row

A horizontal row of three centered testimonial items, each with five indigo stars, a bold quotation, and an attribution to Forbes Magazine. Content is presented as social proof on a white background with no visible card containers.

Tailwind Component #42

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <p class="mb-6 text-sm text-indigo-600 text-center font-bold uppercase tracking-px">We are hiring</p>
    <h2 class="mb-20 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Open positions</h2>
    <div class="flex flex-wrap -m-1.5 mb-10">
      <div class="w-full p-1.5">
        <a href="#">
          <div class="p-10 h-full bg-blueGray-100 hover:bg-blueGray-200 bg-opacity-70 rounded-xl transition ease-in-out duration-200">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <h3 class="mb-4 text-lg font-bold font-heading leading-snug">Front-end Developer</h3>
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <div class="flex flex-wrap items-center -m-1">
                      <div class="w-auto p-1">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                      </div>
                      <div class="w-auto p-1">
                        <p class="font-medium leading-relaxed">Remote/NY</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

Open positions job listing with stacked role cards

A light-background section headed "Open positions" with a small purple eyebrow label "WE ARE HIRING" above it. Below, five vertically stacked job cards each show a role title, location and employment type icons, and a purple "See Details" link with an arrow on the right.

Tailwind Component #43

Tailwind CSS

Flaro

<section class="relative py-24 bg-white overflow-hidden">
  <img class="absolute bottom-0 left-0" src="flaro-assets/images/numbers/gradient.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <h2 class="text-5xl font-bold font-heading tracking-px-n leading-tight">Flaro is the best UI Kit for SaaS Industry</h2>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="md:w-56">
          <h2 class="mb-3 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">15k+</h2>
          <p class="text-lg text-gray-700 font-medium leading-normal">Flaro has garnered more than 15k+ users.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="md:w-56">
          <h2 class="mb-3 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">2.1M+</h2>
          <p class="text-lg text-gray-700 font-medium leading-normal">Flaro has garnered more than 15k+ users.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="md:w-56">
          <h2 class="mb-3 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">93k</h2>
          <p class="text-lg text-gray-700 font-medium leading-normal">Flaro has garnered more than 15k+ users.</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

Flaro SaaS Stats Heading with Three Metric Columns

A light marketing section with a bold heading on the left and three large statistic figures (15k+, 2.1M+, 93k) each followed by a short caption. The soft pastel gradient background and horizontal row arrangement distinguish it as a stats or social proof strip.

Tailwind Component #44

Tailwind CSS

Flaro

<section class="pt-32 xl:pt-64 pb-16 bg-white bg-no-repeat bg-center bg-cover bg-fixed overflow-hidden" style="background-image: url('flaro-assets/images/newsletter/bg.jpeg');">
  <div class="container px-4 mx-auto">
    <div class="py-16 px-20 bg-black bg-opacity-80 rounded-4xl" style="backdrop-filter: blur(37px);">
      <div class="flex flex-wrap xl:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-xl">
            <h2 class="mb-14 text-6xl md:text-7xl text-white font-bold tracking-px-n leading-tight">Build successful business together.</h2>
            <ul>
              <li class="mb-3 inline-flex flex-wrap items-center w-full text-white font-medium leading-relaxed">
                <svg class="mr-3" 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="M5.91699 10.5834L8.25033 12.9167L14.0837 7.08337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span>Beautiful and awesome interface</span>
              </li>
              <li class="mb-3 inline-flex flex-wrap items-center w-full text-white font-medium leading-relaxed">
                <svg class="mr-3" 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="M5.91699 10.5834L8.25033 12.9167L14.0837 7.08337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span>Online collaborative anytime, anywhere.</span>
              </li>
              <li class="inline-flex flex-wrap items-center w-full text-white font-medium leading-relaxed">
                <svg class="mr-3" width="20" height="20" viewBox="0 0 20 20" 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

Tailwind Component #45

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-6 text-6xl md:text-8xl xl:text-10xl text-white font-bold font-heading tracking-px-n leading-none">Our Latest Articles</h2>
    <p class="mb-20 text-lg text-gray-400 font-medium leading-normal md:max-w-xl">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8">
        <div class="p-4 h-full bg-gray-900 bg-opacity-70 rounded-xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-8">
              <div class="mb-9 w-full overflow-hidden rounded-2xl">
                <img class="w-full h-72 transform hover:scale-105 transition ease-in-out duration-1000 object-cover" src="flaro-assets/images/blog/blog-wide3.png" alt="">
              </div>
              <p class="mb-3 text-sm text-gray-400 font-medium">Product</p>
              <a class="inline-block text-white hover:text-gray-200 hover:underline" href="#">
                <h3 class="text-xl font-bold font-heading leading-normal">How startup company can help you to grow as a developer.</h3>
              </a>
            </div>
            <p class="text-sm text-gray-400 font-medium">12 May 2020</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <div class="p-4 h-full bg-gray-900 bg-opacity-70 rounded-xl">
          <div class="flex flex-col justify-between h-full">

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

Tailwind CSS

Flaro

<section x-data="{ showContent: false }" class="pt-28 pb-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <p class="mb-5 text-sm text-indigo-600 font-semibold uppercase tracking-px">Frequently Asked questions</p>
    <h2 class="mb-16 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Common Answers</h2>
    <div class="md:max-w-5xl">
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="p-6 border border-gray-200 rounded-2xl shadow-10xl">
            <h3 class="mb-4 text-lg font-semibold leading-normal">1. How does Flaro help you in problems?</h3>
            <p class="font-sans text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-6 border border-gray-200 rounded-2xl shadow-10xl">
            <h3 class="mb-4 text-lg font-semibold leading-normal">2. What makes us look good?</h3>
            <p class="font-sans text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-6 border border-gray-200 rounded-2xl shadow-10xl">
            <h3 class="mb-4 text-lg font-semibold leading-normal">3. How to claim your 25% discount offer?</h3>
            <p class="font-sans text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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

Tailwind Component #47

Tailwind CSS

Flaro

<section class="bg-white bg-no-repeat bg-center bg-cover bg-fixed overflow-hidden" style="background-image: url('flaro-assets/images/cta/bg.jpeg');">
  <div class="py-40 bg-black bg-opacity-60" style="backdrop-filter: blur(12px);">
    <div class="container px-4 mx-auto">
      <div class="text-center max-w-3xl mx-auto">
        <p class="mb-9 font-sans text-sm text-white font-semibold uppercase tracking-px">👋 Meet new Flaro</p>
        <h2 class="mb-11 text-6xl md:text-8xl xl:text-10xl text-white font-bold text-center tracking-px-n leading-none">Join the tribe &amp; build your startup successful</h2>
        <div class="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">Start 14 Days Free Trial</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

Tailwind Component #48

Tailwind CSS

Flaro

<section class="pt-28 pb-36 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-6 text-6xl md:text-8xl xl:text-10xl text-white text-center font-bold font-heading tracking-px-n leading-none md:max-w-xl mx-auto">Try Flaro for Free</h2>
    <p class="mb-20 text-lg text-gray-400 text-center font-medium leading-normal 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 overflow-hidden bg-gray-900 border border-gray-800 rounded-4xl md:max-w-3xl mx-auto">
      <img class="absolute top-0 left-0 w-52" src="flaro-assets/images/pricing/gradient2.svg" alt="">
      <div class="flex flex-wrap divide-y md:divide-x md:divide-y-0 divide-gray-800 relative">
        <div class="w-full md:w-1/2">
          <div class="px-11 pt-10 pb-12">
            <svg class="mb-9" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.5 34L18 40L16 42H32L30 40L28.5 34M6 26H42M10 34H38C40.2091 34 42 32.2091 42 30V10C42 7.79086 40.2091 6 38 6H10C7.79086 6 6 7.79086 6 10V30C6 32.2091 7.79086 34 10 34Z" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <p class="mb-3 text-gray-500 font-semibold leading-normal">On your machine</p>
            <h3 class="mb-11 text-3xl text-white font-bold leading-snug">Flaro can run on your PC</h3>
            <ul class="mb-11">
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-gray-100 font-semibold leading-normal">3 Team Members</p>
              </li>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #49

Tailwind CSS

Flaro

<section class="relative py-36 bg-gray-50 overflow-hidden">
  <img class="absolute bottom-0 right-0" src="flaro-assets/images/contact/gradient2.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="flex flex-col justify-between h-full">
          <div class="mb-12 md:max-w-md block">
            <p class="mb-6 text-sm text-indigo-600 font-bold uppercase tracking-px">Contact us</p>
            <h2 class="text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Get connected to grow better business.</h2>
          </div>
          <div class="block">
            <p class="mb-4 text-sm text-gray-400 font-bold uppercase tracking-px">Email</p>
            <ul class="mb-14">
              <li class="text-xl font-semibold leading-normal">info@email.com</li>
              <li class="text-xl font-semibold leading-normal">support@gmail.com</li>
            </ul>
            <p class="mb-4 text-sm text-gray-400 font-bold uppercase tracking-px">Phone</p>
            <ul>
              <li class="text-xl font-semibold leading-normal">+1 848 4125 690</li>
              <li class="text-xl font-semibold leading-normal">+1 848 4125 658</li>
            </ul>
          </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

Tailwind Component #50

Tailwind CSS

Flaro

<section class="bg-white overflow-hidden">
  <div class="relative bg-black pt-16 overflow-hidden">
    <img class="absolute left-1/2 bottom-0 transform -translate-x-1/2" src="flaro-assets/images/applications/gradient2.svg" alt="">
    <img class="relative z-10 mx-auto max-h-96 transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/applications/iphones.png" alt="">
  </div>
  <div class="pt-28 pb-36 bg-white">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 xl:w-1/3 p-8">
          <h2 class="text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Online Yoga, from Home</h2>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/3 self-end p-8">
          <p class="text-lg text-gray-600 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestib ulum, commodo pulvinar.</p>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/3 self-end p-8">
          <div class="flex flex-wrap -m-2.5">
            <div class="w-auto p-2.5">
              <a href="#">
                <img class="h-14" src="flaro-assets/images/applications/app-store-round.png" alt="">
              </a>
            </div>
            <div class="w-auto p-2.5">
              <a href="#">
                <img class="h-14" src="flaro-assets/images/applications/play-store-round.png" 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

Tailwind Component #51

Tailwind CSS

Flaro

<section class="relative pt-24 pb-36 bg-blueGray-50 overflow-hidden">
  <img class="absolute left-1/2 bottom-0 transform -translate-x-1/2" src="flaro-assets/images/career/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <p class="mb-6 text-sm text-indigo-600 font-bold uppercase tracking-px">Join with us</p>
    <h2 class="mb-5 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Open Positions</h2>
    <p class="mb-20 text-gray-600 font-medium leading-relaxed md:max-w-md">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae.</p>
    <div class="flex flex-nowrap -m-2 mb-1.5">
      <div class="flex-shrink-0 max-w-md p-2">
        <a class="group" href="#">
          <div class="p-8 h-full bg-white bg-opacity-80 border group-hover:border-gray-300 rounded-xl">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-16">
                <h3 class="mb-4 text-xl font-bold font-heading leading-snug">Front-end Developer</h3>
                <p class="text-gray-500 font-medium leading-relaxed">Lorem ipsum dolor sit amet, consectrtur adipiscing elit. Volutpat tempor vitae.</p>
              </div>
              <div class="flex flex-wrap justify-between items-center -m-2">
                <div class="w-auto p-2">
                  <div class="flex flex-wrap -m-3">
                    <div class="w-auto p-3">
                      <div class="flex flex-wrap items-center -m-1">
                        <div class="w-auto p-1">
                          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #52

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-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 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>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden mr-5 lg:block">
          <div class="inline-block">
            <button class="py-3 px-5 w-full hover:text-gray-700 font-medium rounded-xl bg-transparent transition ease-in-out duration-200" type="button">Sign In</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

Tailwind Component #53

Tailwind CSS

Flaro

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-5 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">The team behind Flaro</h2>
    <p class="mb-20 text-lg text-gray-600 text-center font-medium md:max-w-xl mx-auto">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap max-w-7xl mx-auto -m-3">
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="relative flex flex-col justify-end w-full h-full pt-80 overflow-hidden rounded-3xl">
          <img class="absolute top-0 left-0 h-full w-full object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/team.png" alt="">
          <div class="w-full p-2">
            <div class="bg-black bg-opacity-80 w-full py-4 px-5 rounded-lg" style="backdrop-filter: blur(3px);">
              <h3 class="mb-1 text-lg text-white font-bold leading-snug">Floyd Miles</h3>
              <p class="text-gray-400 font-medium">CEO</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="relative flex flex-col justify-end w-full h-full pt-80 overflow-hidden rounded-3xl">
          <img class="absolute top-0 left-0 h-full w-full object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/team2.png" alt="">
          <div class="w-full p-2">
            <div class="bg-black bg-opacity-80 w-full py-4 px-5 rounded-lg" style="backdrop-filter: blur(3px);">
              <div class="mb-4 pb-3 border-b border-gray-700">
                <h3 class="mb-1 text-lg text-white font-bold leading-snug">Theresa Webb</h3>
                <p class="text-gray-400 font-medium">CEO</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

Tailwind Component #54

Tailwind CSS

Flaro

<section class="relative py-40 bg-white overflow-hidden">
  <img class="absolute left-1/2 bottom-0 transform -translate-x-1/2" src="flaro-assets/images/http-codes/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <img class="w-full max-w-sm mb-16 mx-auto transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/http-codes/illustration2.png" alt="">
    <h3 class="mb-4 text-4xl text-center font-bold font-heading leading-tight">Something went wrong</h3>
    <p class="mb-11 text-gray-600 text-center font-medium leading-relaxed md:max-w-md mx-auto">Lorem ipsum dolor sit amet consectrtur. Volutpat tempor condimentum vitae vel pur pellentes.</p>
    <div class="md:max-w-max mx-auto">
      <button class="inline-flex flex-wrap justify-center items-center py-4 px-6 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">
        <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.6666L2 7.99998M2 7.99998L6.66667 3.33331M2 7.99998L14 7.99998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span>Go Back to Homepage</span>
      </button>
    </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

Tailwind Component #55

Tailwind CSS

Flaro

<section class="relative pt-28 pb-32 bg-indigo-600 overflow-hidden">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/numbers/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="mb-24 border-b border-white border-opacity-10">
      <h2 class="pb-24 text-6xl md:text-8xl xl:text-10xl text-white font-bold tracking-px-n leading-none md:max-w-3xl">Join the tribe &amp; build your startup successful</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8">
        <p class="mb-6 text-gray-200 font-semibold leading-normal">Satisfied Clients</p>
        <h3 class="mb-4 text-6xl md:text-8xl xl:text-10xl text-white font-bold tracking-px-n leading-none">84,900</h3>
        <p class="text-gray-300 font-medium leading-relaxed md:w-56">Flaro has garnered more than 15k+ users.</p>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <p class="mb-6 text-gray-200 font-semibold leading-normal">Downloads</p>
        <h3 class="mb-4 text-6xl md:text-8xl xl:text-10xl text-white font-bold tracking-px-n leading-none">3.2M+</h3>
        <p class="text-gray-300 font-medium leading-relaxed md:w-56">Flaro has garnered more than 15k+ users.</p>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <p class="mb-6 text-gray-200 font-semibold leading-normal">Customer Reviews</p>
        <h3 class="mb-4 text-6xl md:text-8xl xl:text-10xl text-white font-bold tracking-px-n leading-none">21,394</h3>
        <p class="text-gray-300 font-medium leading-relaxed md:w-56">Flaro has garnered more than 15k+ users.</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

Tailwind Component #56

Tailwind CSS

Flaro

<section class="py-24 bg-indigo-600 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="xl:pt-12">
          <h2 class="mb-7 text-6xl md:text-7xl text-white font-bold tracking-px-n leading-tight">Trusted by over 50,000 startups since 2014.</h2>
          <p class="text-white text-opacity-80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu condimentum purus turpis vitae gravida iaculis id quisque nullam. Rhoncus, adipiscing mattis.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="flex justify-center">
          <div class="relative w-full h-full pt-72 lg:pt-80 max-w-sm rounded-3xl overflow-hidden shadow-3xl transform hover:-translate-y-16 transition ease-in-out duration-1000">
            <img class="absolute top-0 left-0 w-full h-full object-cover" src="flaro-assets/images/features/woman.jpg" alt="">
            <div class="bg-white bg-opacity-30 backdrop-blur-xl py-8 px-9" style="backdrop-filter: blur(10px);">
              <p class="mb-3 font-sans inline-block px-3.5 py-1.5 text-xs text-white font-semibold bg-red-500 uppercase tracking-px rounded-full">Live</p>
              <h3 class="mb-3 text-xl font-bold font-heading">Give an amazing on-board experience of your product</h3>
              <p class="text-sm text-gray-600 font-semibold">4096 people are joining</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="flex flex-wrap h-full xl:pb-12">
          <div class="flex flex-wrap self-end -m-10">

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

Tailwind CSS

Flaro

<section x-data="{ activeSlide: 1, 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="#">Create free account</a></div>
              </div>
              <div class="md:max-w-sm">
                <h2 class="mb-4 text-5xl font-bold font-heading tracking-px-n leading-tight">Login to Flaro</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="signInInput3-1" type="text" placeholder="Email address">
                </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

Tailwind Component #58

Tailwind CSS

Flaro

<section class="pt-36 pb-28 bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap gap-2 mb-2 justify-center">
      <div class="w-auto">
        <img class="h-32" src="flaro-assets/logos/brands/logo-square-white.png" alt="">
      </div>
      <div class="w-auto">
        <img class="h-32" src="flaro-assets/logos/brands/logo-square-white2.png" alt="">
      </div>
      <div class="w-auto">
        <img class="h-32" src="flaro-assets/logos/brands/logo-square-white3.png" alt="">
      </div>
      <div class="w-auto">
        <img class="h-32" src="flaro-assets/logos/brands/logo-square-white4.png" alt="">
      </div>
      <div class="w-auto">
        <img class="h-32" src="flaro-assets/logos/brands/logo-square-white5.png" alt="">
      </div>
      <div class="w-auto">
        <img class="h-32" src="flaro-assets/logos/brands/logo-square-white6.png" alt="">
      </div>
    </div>
    <h2 class="mb-6 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none md:max-w-2xl mx-auto">Loved by the incredible community</h2>
    <p class="text-lg text-gray-600 text-center font-medium leading-normal md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.</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

Tailwind Component #59

Tailwind CSS

Flaro

<section class="py-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-5 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">All-in-one, next-gen SaaS experience</h2>
          <p class="text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="flex flex-wrap -m-7">
              <div class="w-auto p-7">
                <div class="relative w-11 h-11 border border-blueGray-200 rounded-full">
                  <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.4375 7.83333V19.75M11.4375 7.83333C11.4375 7.83333 11.4375 6.46495 11.4375 6C11.4375 4.98748 12.2583 4.16667 13.2708 4.16667C14.2834 4.16667 15.1042 4.98748 15.1042 6C15.1042 7.01252 14.2834 7.83333 13.2708 7.83333C12.7233 7.83333 11.4375 7.83333 11.4375 7.83333ZM11.4375 7.83333C11.4375 7.83333 11.4375 6.05767 11.4375 5.54167C11.4375 4.27601 10.4115 3.25 9.14583 3.25C7.88018 3.25 6.85417 4.27601 6.85417 5.54167C6.85417 6.80732 7.88018 7.83333 9.14583 7.83333C9.89548 7.83333 11.4375 7.83333 11.4375 7.83333ZM5.02083 11.5H17.8542M5.02083 11.5C4.00831 11.5 3.1875 10.6792 3.1875 9.66667C3.1875 8.65414 4.00831 7.83333 5.02083 7.83333H17.8542C18.8667 7.83333 19.6875 8.65414 19.6875 9.66667C19.6875 10.6792 18.8667 11.5 17.8542 11.5M5.02083 11.5L5.02083 17.9167C5.02083 18.9292 5.84164 19.75 6.85417 19.75H16.0208C17.0334 19.75 17.8542 18.9292 17.8542 17.9167V11.5" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
                <div class="w-px h-28 bg-blueGray-200 mx-auto"></div>
              </div>
              <div class="flex-1 p-7">

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

Tailwind CSS

Flaro

<section class="py-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex justify-center">
      <div class="relative max-w-6xl mx-auto overflow-hidden rounded-3xl">
        <img class="absolute w-full h-full transform hover:scale-105 transition ease-in-out duration-1000 object-cover" src="flaro-assets/images/testimonials/contact.png" alt="">
        <div class="px-14 py-14 w-3/4 md:w-1/2 bg-white bg-opacity-30 overflow-y-auto h-full" style="backdrop-filter: blur(24px);-webkit-backdrop-filter: blur(24px);">
          <svg class="mb-20" width="47" height="36" viewBox="0 0 47 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 36V25.6999C0 22.7377 0.554721 19.6578 1.66416 16.46C2.80722 13.2286 4.35372 10.1823 6.30365 7.32118C8.2872 4.42637 10.5061 1.98598 12.9603 0L21.4324 5.5035C19.4489 8.4993 17.7847 11.6297 16.4399 14.8948C15.1288 18.1262 14.49 21.6943 14.5236 25.5989V36H0ZM25.5676 36V25.6999C25.5676 22.7377 26.1223 19.6578 27.2318 16.46C28.3748 13.2286 29.9213 10.1823 31.8712 7.32118C33.8548 4.42637 36.0737 1.98598 38.5279 0L47 5.5035C45.0165 8.4993 43.3523 11.6297 42.0075 14.8948C40.6964 18.1262 40.0576 21.6943 40.0912 25.5989V36H25.5676Z" fill="#4F46E5"></path>
          </svg>
          <h3 class="mb-8 text-3xl font-semibold leading-snug">We use Flaro for almost everything: pipe management, hr, contacts management. Great platform to keep all things in one place. What a beauty!! this is world class design and functionality.</h3>
          <h4 class="mb-1 font-bold">Jenny Wilson</h4>
          <p class="text-gray-600 font-medium">Senior UX Designer</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

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

Tailwind CSS Components – Flaro Library

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Three-column five-star testimonial row

Tailwind Component #42

Get the code for 13,400+ components

Open positions job listing with stacked role cards

Tailwind Component #43

Get the code for 13,400+ components

Flaro SaaS Stats Heading with Three Metric Columns

Tailwind Component #44

Get the code for 13,400+ components

Tailwind Component #45

Get the code for 13,400+ components

Tailwind Component #46

Get the code for 13,400+ components

Tailwind Component #47

Get the code for 13,400+ components

Tailwind Component #48

Get the code for 13,400+ components

Tailwind Component #49

Get the code for 13,400+ components

Tailwind Component #50

Get the code for 13,400+ components

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Tailwind Component #55

Get the code for 13,400+ components

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support