Tailwind CSS Components

<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/gradient4.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <p class="mb-4 text-lg text-gray-900 font-medium text-center">Over 195 Flaro users have shared their love</p>
    <h2 class="mb-24 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">Don't just take our word for it</h2>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:flex-1 p-8">
        <div class="flex flex-col items-center max-w-lg mx-auto">
          <div class="flex flex-wrap -m-1.5 mb-7">
            <div class="w-auto p-1.5">
              <img class="h-12" src="flaro-assets/images/testimonials/avatar-social.png" alt="">
            </div>
            <div class="w-auto p-1.5">
              <h3 class="font-semibold">Jacob Jones</h3>
              <p class="text-gray-500">@brooklysim</p>
            </div>
          </div>
          <p class="mb-8 text-xl font-medium text-center">If you haven’t tried out Flaro App yet, I would definitely recommend it for both designers and developers 🤙🏻</p>
          <img class="h-7" src="flaro-assets/logos/brands/brand.png" alt="">
        </div>
      </div>
      <div class="hidden md:flex md:items-center md:w-auto">
        <div class="w-px h-28 bg-gray-200"></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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #342

<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 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">
      <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 text-white hover:text-gray-200 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #343

<section class="py-36 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 xl:w-1/3 p-8">
        <div class="md:max-w-sm">
          <h2 class="mb-4 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Build website fast with Flaro.</h2>
          <p class="text-gray-900 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-2/3 p-8">
        <div class="flex flex-wrap justify-end -m-4">
          <div class="w-full xl:w-auto p-4">
            <div class="xl:max-w-sm h-full">
              <div class="px-9 py-8 h-full bg-blueGray-900 rounded-4xl shadow-7xl">
                <div class="flex flex-col justify-between h-full">
                  <div>
                    <svg class="mb-9" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M23.6186 46.4724L36.6794 13.8038L4.01089 26.8647L11.6252 34.5008L30.1436 20.3397L15.9825 38.8581L23.6186 46.4724Z" fill="#E2E8F0"></path>
                    </svg>
                    <h3 class="mb-5 text-3xl text-white font-bold leading-snug">Free, Forever</h3>
                    <p class="mb-24 text-blueGray-300 font-medium">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit.</p>
                  </div>
                  <a class="inline-flex items-center max-w-max text-white hover:text-gray-200" href="#">
                    <span class="mr-2 font-sans font-medium">Join free for 30 days</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #344

<section class="relative pt-28 pb-24 bg-white overflow-hidden">
  <img class="absolute left-1/2 top-0 transform -translate-x-1/2" src="flaro-assets/images/how-it-works/gradient2.svg" alt="">
  <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">How Flaro works</p>
    <h2 class="mb-20 text-6xl md:text-7xl text-center font-bold font-heading tracking-px-n leading-tight">Make things easy for your business</h2>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="text-center">
          <div class="relative z-10 bg-white w-12 h-12 mb-8 mx-auto 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.75 9.16658H19.25M6.41667 13.7499H7.33333M11 13.7499H11.9167M5.5 17.4166H16.5C18.0188 17.4166 19.25 16.1854 19.25 14.6666V7.33325C19.25 5.81447 18.0188 4.58325 16.5 4.58325H5.5C3.98122 4.58325 2.75 5.81447 2.75 7.33325V14.6666C2.75 16.1854 3.98122 17.4166 5.5 17.4166Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="hidden lg:block absolute left-12 top-1/2 transform -translate-y-1/2 w-96 h-px bg-gray-200"></div>
          </div>
          <div class="md:max-w-xs mx-auto">
            <h3 class="mb-4 font-heading text-xl font-bold font-heading leading-normal">Choose a Plan</h3>
            <p class="text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet consectetur adipiscing elit. Volutpat tempor con.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="text-center">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #345

<section class="pt-28 pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 flex flex-wrap items-end -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h2 class="text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight md:max-w-xl">Advertise impressive product performance.</h2>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <p class="text-lg text-gray-900 font-medium leading-relaxed 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.</p>
      </div>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <a class="flex justify-center md:block h-full" href="#">
          <div class="relative h-full rounded-3xl overflow-hidden">
            <img class="h-full md:w-full object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/features/product.png" alt="">
            <div class="absolute bottom-0 left-0 w-full px-11 pb-10">
              <div class="px-8 py-4 bg-white bg-opacity-10 rounded-xl shadow-5xl" style="-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);">
                <h3 class="text-lg text-white text-center font-semibold">A complete toolkit for your business</h3>
              </div>
            </div>
          </div>
        </a>
      </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #346

<section class="py-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap xl:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <img class="w-full max-w-2xl transform hover:translate-x-16 transition ease-in-out duration-1000 rounded-2xl" src="flaro-assets/images/features/testimonail.png" alt="">
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <div class="flex flex-wrap -m-4">
            <div class="w-auto p-4">
              <div class="flex flex-wrap -m-2">
                <div class="w-auto p-2">
                  <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-2">
                  <h3 class="text-lg font-semibold">Unlimited Team Members</h3>
                </div>
                <div class="w-full p-2">
                  <div class="pb-8 border-b">
                    <p class="text-gray-600 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #347

<section class="py-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 pb-20 border-b border-gray-200">
      <h2 class="text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none md:max-w-3xl">Build stunning websites in record time.</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8">
        <div class="md:max-w-xs">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-7">
              <h3 class="mb-7 text-2xl font-semibold leading-snug">Components</h3>
              <p class="text-gray-600 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit.</p>
            </div>
            <a class="inline-flex items-center max-w-max text-indigo-600 hover:text-indigo-700" href="#">
              <span class="mr-2 font-semibold">Explore Components</span>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <div class="md:max-w-xs">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #348

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #349

<section class="py-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap xl:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h2 class="mb-5 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Get down to business</h2>
        <p class="mb-8 text-lg text-gray-600 font-medium 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.</p>
        <div class="mb-20 md:inline-block">
          <button class="py-4 px-6 w-full text-white font-semibold rounded-xl border border-indigo-700 shadow-4xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Get Started Now</button>
        </div>
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/2 p-8">
            <div class="md:max-w-xs">
              <svg class="mb-6" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9998 12.8333C14.9998 12.281 14.5521 11.8333 13.9998 11.8333C13.4476 11.8333 12.9998 12.281 12.9998 12.8333H14.9998ZM9.9418 23.4673C9.64773 23.9348 9.7883 24.5521 10.2558 24.8462C10.7233 25.1403 11.3406 24.9997 11.6347 24.5322L9.9418 23.4673ZM6.83819 21.5149L5.99174 20.9824L5.99173 20.9824L6.83819 21.5149ZM5.9149 21.1081C5.63288 21.583 5.78921 22.1965 6.26406 22.4786C6.73892 22.7606 7.35248 22.6042 7.63449 22.1294L5.9149 21.1081ZM15.065 23.8696C14.8176 24.3634 15.0174 24.9643 15.5112 25.2116C16.005 25.459 16.6058 25.2593 16.8532 24.7655L15.065 23.8696ZM18.6614 20.1056C18.8118 19.5742 18.5029 19.0215 17.9715 18.8711C17.44 18.7207 16.8873 19.0296 16.737 19.561L18.6614 20.1056ZM17.4386 16.198C17.3639 16.7452 17.7469 17.2494 18.2941 17.3241C18.8413 17.3989 19.3455 17.0159 19.4202 16.4687L17.4386 16.198ZM21.2161 20.8802C21.0649 21.4114 21.373 21.9646 21.9042 22.1157C22.4354 22.2669 22.9885 21.9589 23.1397 21.4277L21.2161 20.8802ZM2.60052 17.4878C2.35919 17.9846 2.56626 18.583 3.06303 18.8243C3.5598 19.0656 4.15815 18.8585 4.39948 18.3618L2.60052 17.4878ZM8.83261 3.88303C8.35455 4.15957 8.19118 4.7713 8.46773 5.24936C8.74427 5.72742 9.356 5.89078 9.83406 5.61424L8.83261 3.88303ZM6.78091 8.66739C7.05745 8.18933 6.89409 7.5776 6.41603 7.30106C5.93797 7.02452 5.32624 7.18788 5.0497 7.66594L6.78091 8.66739ZM12.9998 12.8333C12.9998 16.7429 11.8791 20.3876 9.9418 23.4673L11.6347 24.5322C13.7668 21.1429 14.9998 17.1306 14.9998 12.8333H12.9998ZM19.6666 12.8333C19.6666 9.70372 17.1295 7.16667 13.9999 7.16667V9.16667C16.0249 9.16667 17.6666 10.8083 17.6666 12.8333H19.6666ZM8.33322 12.8333C8.33322 15.8382 7.47458 18.6252 5.99174 20.9824L7.68464 22.0474C9.36228 19.3805 10.3332 16.2259 10.3332 12.8333H8.33322ZM13.9999 7.16667C10.8703 7.16667 8.33322 9.70372 8.33322 12.8333H10.3332C10.3332 10.8083 11.9748 9.16667 13.9999 9.16667V7.16667ZM5.99173 20.9824C5.96552 21.0241 5.93991 21.066 5.9149 21.1081L7.63449 22.1294C7.6508 22.1019 7.66752 22.0746 7.68464 22.0474L5.99173 20.9824ZM16.8532 24.7655C17.5947 23.2853 18.2027 21.7265 18.6614 20.1056L16.737 19.561C16.3129 21.0595 15.7508 22.5008 15.065 23.8696L16.8532 24.7655ZM19.4202 16.4687C19.5827 15.279 19.6666 14.0653 19.6666 12.8333H17.6666C17.6666 13.9744 17.5889 15.0977 17.4386 16.198L19.4202 16.4687ZM24.3333 12.8333C24.3333 7.12639 19.7069 2.5 14 2.5V4.5C18.6024 4.5 22.3333 8.23096 22.3333 12.8333H24.3333ZM23.1397 21.4277C23.9174 18.6955 24.3333 15.8122 24.3333 12.8333H22.3333C22.3333 15.6252 21.9436 18.3244 21.2161 20.8802L23.1397 21.4277ZM3.66667 12.8333C3.66667 14.5041 3.28325 16.0825 2.60052 17.4878L4.39948 18.3618C5.21162 16.69 5.66667 14.8134 5.66667 12.8333H3.66667ZM14 2.5C12.1195 2.5 10.3535 3.00323 8.83261 3.88303L9.83406 5.61424C11.0588 4.90579 12.4805 4.5 14 4.5V2.5ZM5.0497 7.66594C4.16989 9.18685 3.66667 10.9528 3.66667 12.8333H5.66667C5.66667 11.3138 6.07245 9.8921 6.78091 8.66739L5.0497 7.66594Z" fill="#64748B"></path>
              </svg>
              <h3 class="mb-3 text-xl font-semibold leading-normal">Secure Payments</h3>
              <p class="text-gray-600 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-8">
            <div class="md:max-w-xs">
              <svg class="mb-6" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.16667 8.16667H8.17833M8.16667 3.5H14C14.5972 3.49998 15.1943 3.72779 15.6499 4.18342L23.8166 12.3501C24.7279 13.2613 24.7279 14.7387 23.8166 15.6499L15.6499 23.8166C14.7387 24.7278 13.2613 24.7278 12.3501 23.8166L4.18342 15.6499C3.72781 15.1943 3.5 14.5972 3.5 14V8.16667C3.5 5.58934 5.58934 3.5 8.16667 3.5Z" stroke="#64748B" stroke-width="2" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #350

<section class="py-28 bg-indigo-600 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-12 text-6xl md:text-8xl xl:text-10xl text-white text-center font-bold font-heading tracking-px-n leading-none md:max-w-4xl mx-auto">98% designers love Shuffle. Not convinced you’re one?</h2>
    <div class="mb-16 md:max-w-max mx-auto">
      <button class="py-4 px-6 w-full text-indigo-600 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">Start 14 days free trial</button>
    </div>
    <p class="mb-9 text-blueGray-300 text-center font-medium leading-relaxed">Trusted by 100+ development team</p>
    <div class="mb-3 flex flex-wrap justify-center items-center max-w-4xl mx-auto -m-2">
      <div class="w-full sm:w-auto py-3 ms:py-0 sm:px-10">
        <img class="h-9 mx-auto" src="flaro-assets/logos/brands/brand-large.png" alt="">
      </div>
      <div class="w-full sm:w-auto py-3 ms:py-0 sm:px-10">
        <img class="h-9 mx-auto" src="flaro-assets/logos/brands/brand-large2.png" alt="">
      </div>
      <div class="w-full sm:w-auto py-3 ms:py-0 sm:px-10">
        <img class="h-9 mx-auto" src="flaro-assets/logos/brands/brand-large3.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap justify-center items-center max-w-4xl mx-auto -m-2">
      <div class="w-full sm:w-auto py-3 ms:py-0 sm:px-10">
        <img class="h-9 mx-auto" src="flaro-assets/logos/brands/brand-large4.png" alt="">
      </div>
      <div class="w-full sm:w-auto py-3 ms:py-0 sm:px-10">
        <img class="h-9 mx-auto" src="flaro-assets/logos/brands/brand-large5.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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #351

<section class="pt-24 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 text-center tracking-px-n leading-none">Showcase your software</h2>
    <div class="flex flex-wrap -m-16 md:-m-3">
      <div class="w-full md:w-1/3 p-16 md:p-3">
        <div class="px-10 pt-11 text-center bg-gray-100 h-96 rounded-4xl">
          <h3 class="mb-3 text-xl font-bold font-heading leading-normal">Unlimited Team Members</h3>
          <p class="mb-10 text-gray-600 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <img class="mx-auto w-72 h-72 object-cover rounded-3xl shadow-3xl transform hover:translate-y-3 transition ease-in-out duration-1000" src="flaro-assets/images/features/peoples.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 p-16 md:p-3">
        <div class="px-10 pt-11 text-center bg-gray-100 h-96 rounded-4xl">
          <h3 class="mb-3 text-xl font-bold font-heading leading-normal">Get Exact Reports</h3>
          <p class="mb-10 text-gray-600 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <img class="mx-auto w-72 h-72 object-cover rounded-3xl shadow-3xl transform hover:translate-y-3 transition ease-in-out duration-1000" src="flaro-assets/images/features/reports.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 p-16 md:p-3">
        <div class="px-10 pt-11 text-center bg-gray-100 h-96 rounded-4xl">
          <h3 class="mb-3 text-xl font-bold font-heading leading-normal">Unlimited Team Members</h3>
          <p class="mb-10 text-gray-600 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <img class="mx-auto w-72 h-72 object-cover rounded-3xl shadow-3xl transform hover:translate-y-3 transition ease-in-out duration-1000" src="flaro-assets/images/features/users.png" alt="">
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #352

<section class="pt-24 pb-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-7 text-6xl md:text-8xl xl:text-10xl font-bold font-heading text-center tracking-px-n leading-none">Say hi to new data</h2>
    <p class="mb-14 text-lg text-gray-600 font-medium text-center mx-auto md:max-w-2xl">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 justify-center">
      <div class="inline-block">
        <img class="w-full max-w-4xl mb-11 mx-auto transform hover:translate-y-3 transition ease-in-out duration-1000 rounded-2xl" src="flaro-assets/images/features/data.png" alt="">
        <ul class="flex flex-wrap justify-center -m-8">
          <li class="w-auto p-8"><a class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold uppercase tracking-px" href="#">Real-time Analytics</a></li>
          <li class="w-auto p-8"><a class="text-sm text-gray-400 hover:text-gray-500 font-semibold uppercase tracking-px" href="#">Easy Projects</a></li>
          <li class="w-auto p-8"><a class="text-sm text-gray-400 hover:text-gray-500 font-semibold uppercase tracking-px" href="#">Email Notification</a></li>
          <li class="w-auto p-8"><a class="text-sm text-gray-400 hover:text-gray-500 font-semibold uppercase tracking-px" href="#">Cloud Servers</a></li>
        </ul>
      </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #353

<section class="py-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap xl:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <img class="w-full max-w-lg mx-auto transform hover:translate-y-3 transition ease-in-out duration-1000 rounded-2xl" src="flaro-assets/images/features/upgrade.png" alt="">
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-xl">
          <p class="mb-7 text-sm text-gray-600 font-semibold uppercase tracking-px">👋 Meet new Flaro</p>
          <h2 class="mb-32 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Upgrade to pro to unlock all features.</h2>
          <div class="flex flex-wrap mb-5 -m-8">
            <div class="w-full md:w-1/2 p-8">
              <div class="md:max-w-xs">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <svg class="mt-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9 3V5M15 3V5M9 19V21M15 19V21M5 9H3M5 15H3M21 9H19M21 15H19M7 19H17C18.1046 19 19 18.1046 19 17V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19ZM9 9H15V15H9V9Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div class="flex-1 p-2">
                    <h3 class="mb-2 text-xl font-semibold leading-normal">Analytical</h3>
                    <p class="text-gray-600 font-medium leading-relaxed">Lorem ipsum dolor sit amet, to the consectr adipis.</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #354

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden" style="background: url(gradia-assets/images/hero/bg.png) no-repeat; background-size: cover;">
  <section>
    <div class="flex items-center justify-between px-8 py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.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-10">
              <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
              <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
              <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
              <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <button class="group relative font-heading block py-2 px-5 text-lg text-white border-2 border-white overflow-hidden rounded-10">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
              <p class="relative z-10 group-hover:text-gray-800" >Start Free Trial</p>
            </button>
          </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Dark gradient hero with remote team headline and profile cards

A dark gradient hero section for a remote team management product, featuring a bold headline, two CTA buttons, a testimonial quote, and a scattered grid of team member profile cards showing names, roles, and locations on the right.

Tailwind Component #355

<section x-data="{ mobileNavOpen: false }" class="bg-gradient-pink2 background-animate overflow-hidden">
  <section>
    <div class="flex items-center justify-between px-8 py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-10">
              <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
              <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
              <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
              <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><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 lg:block">
            <div class="flex flex-wrap">
              <div class="w-auto">
                <button class="font-heading block py-2 px-5 mr-5 text-lg text-gray-900 rounded-10" >Login</button>
              </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Gradia Hero Section with Headline, Badge, and Profile Cards

A light-themed marketing hero section for the Gradia brand, featuring a navigation bar, a rated badge, a large bold headline, body copy, and a dark CTA button on the left. The right side shows illustrative profile cards with avatars, a weekly connection bar chart, and decorative accents.

Tailwind Component #356

<section x-data="{ mobileNavOpen: false }" class="bg-gradient-fuchsia background-animate overflow-hidden">
  <section>
    <div class="flex items-center justify-between px-8 py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
        </div>
      </div>
      <div class="w-auto hidden lg:block">
        <ul class="flex items-center mr-10">
          <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
          <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
          <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
          <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
        </ul>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <button class="font-heading block py-3.5 px-5 uppercase text-xs tracking-px text-white font-bold bg-white bg-opacity-20 hover:bg-opacity-10 transition ease-in rounded-10" >Start Free Trial</button>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="text-gray-800" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #357

<section x-data="{ mobileNavOpen: false }" class="relative bg-gradient-indigo background-animate overflow-hidden">
  <section>
    <div class="flex items-center justify-between px-8 py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
        </div>
      </div>
      <div class="w-auto hidden lg:block">
        <ul class="flex items-center mr-10">
          <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
          <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
          <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
          <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
        </ul>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <button class="font-heading block py-3.5 px-5 uppercase text-xs tracking-px text-white font-bold bg-white bg-opacity-20 hover:bg-opacity-10 transition ease-in rounded-10" >Start Free Trial</button>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="text-gray-800" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #358

<section x-data="{ mobileNavOpen: false }" class="relative bg-gradient-white background-animate overflow-hidden">
  <section>
    <div class="flex items-center justify-between px-8 py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-10">
              <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
              <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
              <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
              <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><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 lg:block">
            <div class="flex flex-wrap">
              <div class="w-auto">
                <button class="font-heading block py-2 px-5 mr-5 text-lg text-gray-900 rounded-10" >Login</button>
              </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #359

<section class="pt-24 pb-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-14 font-heading font-semibold text-center text-6xl sm:text-7xl text-gray-900" >Frequently asked question</h2>
    <div class="max-w-2xl mx-auto bg-gradient-cyan p-0.5">
      <div class="flex flex-wrap">
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="pb-0.5 bg-gradient-cyan">
              <div class="py-3.5 px-5 bg-white">
                <div class="flex flex-wrap justify-between -m-2">
                  <div class="flex-1 p-2">
                    <p class="font-heading font-semibold text-lg text-gray-900" >Is it really unlimited downloads?</p>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                      <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <div :class="{ 'hidden': accordion }" class="pt-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

FAQ List with Gradient Borders and Arrow Icons

A centered FAQ section with a bold heading above a vertical stack of five question rows, each separated by thin gradient-outlined dividers and marked with a right arrow icon. The layout is minimal with a white background and uses a teal-to-blue-to-orange gradient border.

Tailwind Component #360