Tailwind CSS Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

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

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #3562

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-24 md:py-40 lg:py-72 bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto mb-16 md:mb-0">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4">
          <div class="md:max-w-md mx-auto">
            <h3 class="mb-6 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Be the first to know when we launch</h3>
            <p class="mb-8 text-lg md:text-xl leading-relaxed text-coolGray-400 font-medium max-w-5xl">Stay in the loop with everything you need to know.</p>
            <div class="md:max-w-md">
              <div class="flex flex-wrap mb-1">
                <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                  <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
                </div>
                <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
              </div>
              <span class="text-xs text-coolGray-500 font-medium">
                <span>We care about your data in our</span>
                <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
              </span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #3563

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #3564

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-red-100 border border-red-200 rounded-md">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="font-medium text-sm text-red-900">An example of an error warning</h3>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#752C21"></path>
            </svg>
          </a>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Alert Component Generator

Tailwind Component #3565

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full px-4 mb-14">
          <div class="flex flex-wrap justify-between items-center">
            <div class="w-full lg:w-1/2 mb-10 lg:mb-0">
              <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Rich text</span>
              <h3 class="mb-4 text-3xl md:text-4xl text-white font-bold tracking-tighter">Beautiful tool that helps you</h3>
              <p class="text-lg md:text-xl leading-8 text-coolGray-400 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
            </div>
            <div class="w-full lg:w-auto">
              <div class="flex flex-wrap lg:justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-white bg-coolGray-700 hover:bg-coolGray-600 rounded-md" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
          <p class="mb-6 text-lg font-medium leading-7 text-coolGray-400">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <h3 class="mb-4 text-2xl lg:text-3xl font-semibold text-white">Header 1</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 Rich text Component Generator

Tailwind Component #3566

Tailwind CSS

Flex

<section class="fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-coolGray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-lg w-full m-auto p-8 bg-white rounded-md">
    <div class="p-7 pb-0 pr-0 mb-8 bg-coolGray-50 border border-coolGray-100 rounded-md">
      <img class="ml-auto h-56 object-cover" src="flex-ui-assets/images/dashboard/forms/dashboard.png" alt="">
    </div>
    <p class="mb-1 text-2xl font-semibold text-coolGray-900">Welcome to Flex dashboards</p>
    <p class="mb-4 text-sm font-medium text-coolGray-500">Here are some quick tips to get you up and running with our recent updates on Flex for Shuffle</p>
    <ul class="flex flex-wrap -m-1.5 mb-5">
      <li class="p-1.5"><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></li>
      <li class="p-1.5"><a class="inline-block w-3 h-3 bg-green-400 rounded-full" href="#"></a></li>
      <li class="p-1.5"><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></li>
      <li class="p-1.5"><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></li>
      <li class="p-1.5"><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></li>
    </ul>
    <div class="flex flex-wrap justify-end -m-2">
      <div class="w-full md:w-1/2 p-2">
        <button class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white font-medium text-base text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">
          <p>Skip</p>
        </button>
      </div>
      <div class="w-full md:w-1/2 p-2">
        <button class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-green-500 hover:bg-green-600 font-medium text-base text-white border border-green-500 rounded-md shadow-button">
          <p>Next</p>
        </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 Modals Component Generator

Tailwind Component #3567

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #3568

Tailwind CSS

Flex

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <section class="py-20 xl:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Numbers</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">We believe in the power of data</h3>
      <p class="mb-16 xl:mb-24 text-lg md:text-xl text-coolGray-500 font-medium max-w-3xl">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      <div class="flex flex-wrap items-center -mx-4 text-center">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="flex flex-wrap justify-center -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-green-600 font-bold tracking-tighter">235.000</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-bold">Projects completed</h3>
              <p class="text-coolGray-500 font-medium">No need to hire specialists for each channel.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-green-600 font-bold tracking-tighter">$10m</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-bold">APR</h3>
              <p class="text-coolGray-500 font-medium">Track how much money a company just in case</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 Stats Component Generator

Tailwind Component #3569

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full px-4 mb-14">
          <div class="flex flex-wrap justify-between items-center">
            <div class="w-full lg:w-1/2 mb-10 lg:mb-0">
              <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Rich text</span>
              <h3 class="mb-4 text-3xl md:text-4xl text-coolGray-900 font-bold tracking-tighter">Beautiful tool that helps you</h3>
              <p class="text-lg md:text-xl leading-8 text-coolGray-500 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
            </div>
            <div class="w-full lg:w-auto">
              <div class="flex flex-wrap lg:justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-coolGray-500 bg-white border border-transparent hover:border-coolGray-200 rounded-md" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
          <p class="mb-6 text-lg font-medium leading-7 text-coolGray-500">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <h3 class="mb-4 text-2xl lg:text-3xl font-semibold text-coolGray-800">Header 1</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 Rich text Component Generator

Tailwind Component #3570

Tailwind CSS

Flex

<section x-data="{ current: 0 }" class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-16 md:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
          <div class="relative h-full overflow-hidden max-w-max mx-auto rounded-md">
            <button class="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full">
              <svg class="ml-1" width="17" height="20" viewbox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.5 9.13001L1.50001 1.05001C1.34799 0.962237 1.17554 0.916031 1.00001 0.916031C0.824471 0.916031 0.652027 0.962237 0.500008 1.05001C0.347404 1.13811 0.220789 1.26497 0.132986 1.41775C0.0451825 1.57053 -0.000691684 1.7438 7.88292e-06 1.92001V18.08C-0.000691684 18.2562 0.0451825 18.4295 0.132986 18.5823C0.220789 18.735 0.347404 18.8619 0.500008 18.95C0.652027 19.0378 0.824471 19.084 1.00001 19.084C1.17554 19.084 1.34799 19.0378 1.50001 18.95L15.5 10.87C15.6539 10.7828 15.7819 10.6563 15.871 10.5035C15.96 10.3506 16.007 10.1769 16.007 10C16.007 9.82311 15.96 9.64938 15.871 9.49654C15.7819 9.3437 15.6539 9.21722 15.5 9.13001ZM2.00001 16.35V3.65001L13 10L2.00001 16.35Z" fill="white"></path>
              </svg>
            </button>
            <img src="flex-ui-assets/elements/testimonials/placeholder-video.png">
            <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
              <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
            </video>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
            <div x-show="current === 0">

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

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="relative py-10 px-14 mx-auto bg-green-500 rounded-md overflow-hidden">
      <img class="absolute z-10 left-4 top-4" src="flex-ui-assets/elements/dashboard/banners/dots-red.svg" alt="">
      <img class="absolute z-10 right-4 bottom-4" src="flex-ui-assets/elements/dashboard/banners/dots-red.svg" alt="">
      <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="flex-ui-assets/elements/dashboard/banners/wave-shadow-dark.svg" alt="">
      <div class="relative z-10 text-center">
        <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Ideal banner asset for your dashboard project</h2>
        <button class="block mx-auto px-4 py-3 font-medium text-base text-coolGray-800 bg-white hover:bg-coolGray-50 rounded-md">Get Started</button>
      </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 Banners Component Generator

Tailwind Component #3572

Tailwind CSS

Flex

<section class="relative pt-16 pb-40 md:pb-72 wave-bottom overflow-hidden">
  <div class="absolute top-0 left-0 h-4/5 md:h-1/2 w-full bg-coolGray-50"></div>
  <div class="absolute top-0 left-0 w-full mt-72 md:mt-64 lg:mt-52">
    <div class="h-80 md:h-64 lg:h-52 w-full bg-green-500"></div>
    <div class="wave wave-bottom w-full text-green-500">
      <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative py-16 px-4 md:px-24 bg-coolGray-900 rounded-xl">
      <img class="absolute top-0 left-0 w-full h-full object-cover" src="flex-ui-assets/elements/pattern-dark.svg" alt="">
      <div class="relative flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="max-w-md">
            <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold text-white leading-snug">The fastest way from idea to live site. Period.</h2>
            <p class="text-lg md:text-xl font-heading font-medium text-coolGray-400">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto mb-2 md:mb-0 md:mr-4 text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Get Started</a><a class="inline-flex items-center justify-center px-7 py-3 h-14 w-full md:w-auto text-lg leading-7 text-coolGray-800 bg-white hover:bg-coolGray-100 font-medium focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 border border-coolGray-100 rounded-md shadow-sm" href="#">Learn More</a></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 Call to action Component Generator

Tailwind Component #3573

Tailwind CSS

Flex

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <section class="py-20 xl:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Numbers</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-white font-bold tracking-tighter">We believe in the power of data</h3>
      <p class="mb-16 xl:mb-24 text-lg md:text-xl text-coolGray-400 font-medium max-w-3xl">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      <div class="flex flex-wrap items-center -mx-4 text-center">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="flex flex-wrap justify-center -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-green-600 font-bold tracking-tighter">235.000</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-200 font-bold">Projects completed</h3>
              <p class="text-coolGray-400 font-medium">No need to hire specialists for each channel.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8">
              <h2 class="mb-4 text-4xl lg:text-5xl text-green-600 font-bold tracking-tighter">$10m</h2>
              <h3 class="mb-2 text-lg md:text-xl text-coolGray-200 font-bold">APR</h3>
              <p class="text-coolGray-400 font-medium">Track how much money a company just in case</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 Stats Component Generator

Tailwind Component #3574

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 bg-white rounded-md shadow-dashboard">
      <h2 class="mb-6 text-lg font-semibold">Discover our tools</h2>
      <div class="flex flex-wrap -m-3 mb-6">
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-full md:w-auto self-start p-2">
              <div class="flex justify-center items-center w-12 h-12 bg-green-100 text-green-500 rounded-full">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 18C14.2652 18 14.5196 17.8947 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V15C15 14.7348 14.8946 14.4805 14.7071 14.2929C14.5196 14.1054 14.2652 14 14 14C13.7348 14 13.4804 14.1054 13.2929 14.2929C13.1054 14.4805 13 14.7348 13 15V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8947 13.7348 18 14 18ZM10 18C10.2652 18 10.5196 17.8947 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V15C11 14.7348 10.8946 14.4805 10.7071 14.2929C10.5196 14.1054 10.2652 14 10 14C9.73479 14 9.48044 14.1054 9.2929 14.2929C9.10536 14.4805 9.00001 14.7348 9.00001 15V17C9.00001 17.2652 9.10536 17.5196 9.2929 17.7071C9.48044 17.8947 9.73479 18 10 18ZM19 6.00003H17.62L15.89 2.55003C15.8371 2.42308 15.7587 2.3084 15.6595 2.21316C15.5603 2.11791 15.4425 2.04414 15.3135 1.99647C15.1846 1.94879 15.0471 1.92823 14.9098 1.93607C14.7725 1.94392 14.6383 1.97999 14.5156 2.04204C14.3929 2.10408 14.2843 2.19078 14.1966 2.2967C14.1089 2.40261 14.044 2.52548 14.0059 2.65762C13.9679 2.78976 13.9575 2.92833 13.9754 3.06467C13.9933 3.20102 14.0391 3.3322 14.11 3.45003L15.38 6.00003H8.62001L9.89001 3.45003C9.98707 3.21693 9.99237 2.95575 9.90483 2.71891C9.81729 2.48208 9.6434 2.28712 9.41807 2.17319C9.19274 2.05926 8.93265 2.03479 8.69002 2.10469C8.44739 2.17458 8.24019 2.33368 8.11001 2.55003L6.38001 6.00003H5.00001C4.2932 6.01078 3.61288 6.27077 3.07906 6.73416C2.54523 7.19755 2.19218 7.83455 2.08218 8.53283C1.97217 9.23112 2.11228 9.94581 2.47779 10.5509C2.8433 11.1559 3.41073 11.6125 4.08001 11.84L4.82001 19.3C4.89463 20.0426 5.24335 20.7307 5.79808 21.2299C6.35281 21.7292 7.07371 22.0038 7.82001 22H16.2C16.9463 22.0038 17.6672 21.7292 18.2219 21.2299C18.7767 20.7307 19.1254 20.0426 19.2 19.3L19.94 11.84C20.6107 11.6118 21.1791 11.1536 21.5443 10.5465C21.9096 9.93942 22.0482 9.22266 21.9356 8.52317C21.823 7.82368 21.4665 7.18661 20.9292 6.7248C20.3919 6.26299 19.7085 6.00624 19 6.00003ZM17.19 19.1C17.1651 19.3475 17.0489 19.5769 16.864 19.7433C16.6791 19.9098 16.4388 20.0013 16.19 20H7.81001C7.56124 20.0013 7.32094 19.9098 7.13603 19.7433C6.95112 19.5769 6.83488 19.3475 6.81001 19.1L6.10001 12H17.9L17.19 19.1ZM19 10H5.00001C4.73479 10 4.48044 9.89467 4.2929 9.70713C4.10536 9.5196 4.00001 9.26524 4.00001 9.00003C4.00001 8.73481 4.10536 8.48046 4.2929 8.29292C4.48044 8.10538 4.73479 8.00003 5.00001 8.00003H19C19.2652 8.00003 19.5196 8.10538 19.7071 8.29292C19.8946 8.48046 20 8.73481 20 9.00003C20 9.26524 19.8946 9.5196 19.7071 9.70713C19.5196 9.89467 19.2652 10 19 10Z" fill="currentColor"></path>
                </svg>
              </div>
            </div>
            <div class="w-full md:flex-1 p-2">
              <h3 class="mb-1 font-semibold text-coolGray-900 text-base">Instant sales support</h3>
              <p class="text-xs text-coolGray-500 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</p>
            </div>
            <div class="w-full md:w-auto p-2">
              <button class="flex flex-wrap justify-center items-center w-9 h-9 font-medium text-sm text-coolGray-500 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.95 9.40832L8.23334 4.69999C8.15587 4.62188 8.0637 4.55989 7.96215 4.51758C7.8606 4.47527 7.75168 4.45349 7.64167 4.45349C7.53166 4.45349 7.42274 4.47527 7.32119 4.51758C7.21964 4.55989 7.12747 4.62188 7.05001 4.69999C6.8948 4.85613 6.80768 5.06733 6.80768 5.28749C6.80768 5.50764 6.8948 5.71885 7.05001 5.87499L11.175 10.0417L7.05001 14.1667C6.8948 14.3228 6.80768 14.534 6.80768 14.7542C6.80768 14.9743 6.8948 15.1855 7.05001 15.3417C7.12718 15.4204 7.21922 15.483 7.32078 15.526C7.42235 15.5689 7.53142 15.5912 7.64167 15.5917C7.75193 15.5912 7.861 15.5689 7.96256 15.526C8.06412 15.483 8.15616 15.4204 8.23334 15.3417L12.95 10.6333C13.0346 10.5553 13.1021 10.4606 13.1483 10.3552C13.1944 10.2497 13.2183 10.1359 13.2183 10.0208C13.2183 9.90574 13.1944 9.7919 13.1483 9.68648C13.1021 9.58107 13.0346 9.48636 12.95 9.40832V9.40832Z" fill="#BBC3CF"></path>
                </svg>
              </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 Cards Component Generator

Tailwind Component #3575

Tailwind CSS

Flex

<section>
  <div class="py-16 md:py-24 bg-coolGray-50 border-b border-b-2 border-green-500" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-repeat: no-repeat; background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-5xl">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Blog</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-8 md:pt-16 pb-16 md:pb-24 bg-white">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/4 px-4">
          <div class="relative mb-5">
            <img class="absolute top-1/2 left-4 transform -translate-y-1/2" src="flex-ui-assets/elements/blog/search.svg" alt="">
            <input class="w-full py-3 pl-12 pr-4 text-coolGray-900 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Search">
          </div>
          <span class="inline-block mb-4 md:pl-4 text-sm text-coolGray-500 uppercase font-semibold">Categories</span>
          <ul class="md:flex lg:flex-col mb-8 text-center md:text-left">
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">All Categories</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Development</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Marketing</a></li>
            <li class="mb-2"><a class="block w-full md:w-auto py-3 px-4 text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-semibold hover:font-bold rounded-md hover:shadow-sm" href="#">Technology</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #3576

Tailwind CSS

Flex

<section class="bg-white p-8">
  <div class="flex flex-wrap items-center">
    <div class="w-full">
      <h2 class="mb-2 font-semibold text-black text-3xl">Page heading name</h2>
      <p class="text-coolGray-500 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </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 Navbar Component Generator

Tailwind Component #3577

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="pt-20 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl mx-auto mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Contact</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
      </div>
      <div class="flex flex-wrap -mx-4 pb-16">
        <div class="w-full md:w-1/3 px-4 mb-10 md:mb-0">
          <div class="max-w-xs mx-auto text-center">
            <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
              <svg class="h-6 text-white" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-800 font-bold">Email</h3>
            <a class="text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>
          </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 Contact Component Generator

Tailwind Component #3578

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="pt-20 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl mx-auto mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-9xl">Contact</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
      </div>
      <div class="flex flex-wrap -mx-4 pb-16">
        <div class="w-full md:w-1/3 px-4 mb-10 md:mb-0">
          <div class="max-w-xs mx-auto text-center">
            <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
              <svg class="h-6 text-coolGray-800" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-white font-bold">Email</h3>
            <a class="text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>
          </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 Contact Component Generator

Tailwind Component #3579

Tailwind CSS

Flex

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="text-center max-w-xs mx-auto">
            <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Macauley Herring</h3>
            <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <div class="flex items-center justify-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></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 Team Component Generator

Tailwind Component #3580

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 lg:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
          <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-medium font-bold tracking-tighter">Join our team</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <a class="block p-10 mb-8 bg-coolGray-800 hover:bg-coolGray-700 hover:border-coolGray-600 border border-transparent rounded-md shadow-md transition duration-200" href="#">
            <span class="inline-block py-px px-2 mb-2 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Software Development</span>
            <h3 class="mb-2 text-lg md:text-xl text-white font-semibold">Front-end Developer</h3>
            <p class="mb-4 max-w-sm text-coolGray-400 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
            <div class="inline-flex mr-6 items-center">
              <svg class="text-coolGray-500" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="currentColor"></path>
              </svg>
              <span class="ml-2 text-coolGray-400 font-medium">Remote friendly</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Careers 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 #3561

Get the code for 13,400+ components

Tailwind Component #3562

Get the code for 13,400+ components

Tailwind Component #3563

Get the code for 13,400+ components

Tailwind Component #3564

Get the code for 13,400+ components

Tailwind Component #3565

Get the code for 13,400+ components

Tailwind Component #3566

Get the code for 13,400+ components

Tailwind Component #3567

Get the code for 13,400+ components

Tailwind Component #3568

Get the code for 13,400+ components

Tailwind Component #3569

Get the code for 13,400+ components

Tailwind Component #3570

Get the code for 13,400+ components

Tailwind Component #3571

Get the code for 13,400+ components

Tailwind Component #3572

Get the code for 13,400+ components

Tailwind Component #3573

Get the code for 13,400+ components

Tailwind Component #3574

Get the code for 13,400+ components

Tailwind Component #3575

Get the code for 13,400+ components

Tailwind Component #3576

Get the code for 13,400+ components

Tailwind Component #3577

Get the code for 13,400+ components

Tailwind Component #3578

Get the code for 13,400+ components

Tailwind Component #3579

Get the code for 13,400+ components

Tailwind Component #3580

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support