Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

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

New to Shuffle? Try our tools:

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

Components

Tailwind Component #3601

Tailwind CSS

Flex

<section class="py-24 md:py-32 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">
    <div class="flex flex-wrap lg:items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md: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">Features</span>
        <h1 class="mb-8 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
        <a class="inline-block py-4 px-5 w-full md:w-auto text-base leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="relative mx-auto md:mr-0 max-w-max">
          <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
          <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
          <img src="flex-ui-assets/images/features/stock2.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #3602

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-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center justify-center lg:justify-between -mx-4">
        <div class="w-auto px-4 order-last lg:order-first">
          <button class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-coolGray-800 hover:bg-coolGray-700 text-coolGray-200">
            <svg width="12" height="14" viewbox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.9999 6H3.4099L6.7099 2.71C6.8982 2.5217 7.00399 2.2663 7.00399 2C7.00399 1.7337 6.8982 1.47831 6.7099 1.29C6.52159 1.1017 6.2662 0.995911 5.9999 0.995911C5.73359 0.995911 5.4782 1.1017 5.2899 1.29L0.289896 6.29C0.198856 6.38511 0.127491 6.49725 0.0798963 6.62C-0.0201217 6.86346 -0.0201217 7.13654 0.0798963 7.38C0.127491 7.50275 0.198856 7.6149 0.289896 7.71L5.2899 12.71C5.38286 12.8037 5.49346 12.8781 5.61532 12.9289C5.73718 12.9797 5.86788 13.0058 5.9999 13.0058C6.13191 13.0058 6.26261 12.9797 6.38447 12.9289C6.50633 12.8781 6.61693 12.8037 6.7099 12.71C6.80363 12.617 6.87802 12.5064 6.92879 12.3846C6.97956 12.2627 7.00569 12.132 7.00569 12C7.00569 11.868 6.97956 11.7373 6.92879 11.6154C6.87802 11.4936 6.80363 11.383 6.7099 11.29L3.4099 8H10.9999C11.2651 8 11.5195 7.89465 11.707 7.70711C11.8945 7.51957 11.9999 7.26522 11.9999 7C11.9999 6.73479 11.8945 6.48043 11.707 6.2929C11.5195 6.10536 11.2651 6 10.9999 6Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="w-full lg:w-2/6 px-4 mb-12 lg:mb-0">
          <div class="flex items-center">
            <img class="w-20 md:w-24 h-20 md:h-24 mr-6 rounded-full" src="flex-ui-assets/images/testimonials/avatar1.png" alt="">
            <div>
              <h3 class="mb-2 text-xl md:text-2xl text-white font-semibold">Darren Dunlap</h3>
              <span class="text-lg text-coolGray-400 font-medium">CEO &amp; Founder at Flex.co</span>
            </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 Testimonials Component Generator

Tailwind Component #3603

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-green-100 border border-green-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="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="font-medium text-sm text-green-900">Success alert example</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="#156633"></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 #3604

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="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">
      <div class="flex flex-wrap pt-24 pb-12 -mx-4">
        <div class="w-full md:w-1/2 lg:w-4/12 px-4 mb-16 lg:mb-0">
          <a class="inline-block mb-4" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
          <p class="text-base md:text-lg text-coolGray-500 font-medium lg:w-64">Launch your own Software As A Service Application with Flex Solutions.</p>
        </div>
        <div class="w-full md:w-1/4 lg:w-2/12 px-4 mb-16 lg:mb-0">
          <h3 class="mb-5 text-lg font-bold text-coolGray-900">Product</h3>
          <ul>
            <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Solutions</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Tutorials</a></li>
            <li><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Updates</a></li>
          </ul>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #3605

Tailwind CSS

Flex

<section class="relative py-24 md:py-44 lg:pt-56 lg:pb-72 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">
      <div class="w-full md:w-2/3">
        <div class="md:max-w-xl mx-auto text-center md:text-left">
          <span class="text-6xl md:text-7xl text-green-500 leading-tight font-bold">404</span>
          <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Page not found</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 md:w-auto py-1 md:py-0 md: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 rounded-md shadow-sm" href="#">Go back to Homepage</a></div>
            <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 font-medium text-center bg-coolGray-600 hover:bg-coolGray-700 focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="absolute top-0 left-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave2-yellow.svg" alt="">
  <img class="absolute right-6 top-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
  <img class="absolute right-0 bottom-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
  <img class="absolute left-6 bottom-6 w-28 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 #3606

Tailwind CSS

Flex

<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">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md: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">Numbers</span>
        <h3 class="mb-12 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">We believe in numbers</h3>
        <div class="flex flex-wrap justify-center -mx-4 text-center">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">235.000</h2>
            <h3 class="text-lg md:text-xl text-coolGray-500 font-medium">Projects completed</h3>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">$10m</h2>
            <h3 class="text-lg md:text-xl text-coolGray-500 font-medium">APR</h3>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">+50.000</h2>
            <h3 class="text-lg md:text-xl text-coolGray-500 font-medium">Hours Saved Annually</h3>
          </div>
          <div class="w-full md:w-1/2 px-4">
            <h2 class="mb-4 text-4xl lg:text-5xl text-coolGray-900 font-bold tracking-tighter">3.500</h2>
            <h3 class="text-lg md:text-xl text-coolGray-500 font-medium">Unique Users</h3>
          </div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #3607

Tailwind CSS

Flex

<section class="relative pt-16 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 md:mb-0">
    <div class="w-full md:w-1/2 md:pr-4">
      <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 #3608

Tailwind CSS

Flex

<section class="relative py-24 md:py-44 lg:pt-56 lg:pb-72 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap">
      <div class="w-full md:w-2/3">
        <div class="md:max-w-xl mx-auto text-center md:text-left">
          <span class="text-6xl md:text-7xl text-green-500 leading-tight font-bold">404</span>
          <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Page not found</h2>
          <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
          <div class="flex flex-wrap">
            <div class="w-full md:w-auto py-1 md:py-0 md: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 md:w-auto py-1 md: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="absolute top-0 left-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave2-yellow.svg" alt="">
  <img class="absolute right-6 top-6 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-green.svg" alt="">
  <img class="absolute right-0 bottom-0 w-28 md:w-auto" src="flex-ui-assets/elements/wave3-red.svg" alt="">
  <img class="absolute left-6 bottom-6 w-28 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 #3609

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <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="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>
  <div class="py-24 md:py-32 bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md: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-full shadow-sm">Features</span>
          <h1 class="mb-8 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Gain more insight into how people use your</h1>
          <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <a class="inline-block py-4 px-5 w-full md:w-auto text-base leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative mx-auto md:mr-0 max-w-max">
            <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img src="flex-ui-assets/images/features/stock2.png" alt="">
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #3610

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="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 pt-24 pb-12 -mx-4">
        <div class="w-full md:w-1/2 lg:w-4/12 px-4 mb-16 lg:mb-0">
          <a class="inline-block mb-4" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
          <p class="text-base md:text-lg text-coolGray-400 font-medium lg:w-64">Launch your own Software As A Service Application with Flex Solutions.</p>
        </div>
        <div class="w-full md:w-1/4 lg:w-2/12 px-4 mb-16 lg:mb-0">
          <h3 class="mb-5 text-lg font-bold text-white">Product</h3>
          <ul>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Solutions</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></li>
            <li class="mb-4"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Tutorials</a></li>
            <li><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Updates</a></li>
          </ul>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #3611

Tailwind CSS

Flex

<section class="py-16 md:py-24 lg:pb-52 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-repeat: no-repeat; background-position: center top;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-16">
      <div class="w-full md:w-3/4 mb-8 md: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-full shadow-sm">Blog</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Blog posts</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 class="w-full md:w-1/4"><a class="flex items-center justify-center py-2 px-4 ml-auto text-sm leading-5 text-green-50 font-medium bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 md:max-w-max rounded-md" href="#">View All Posts</a></div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/room.jpg" alt="">
        </a>
        <p class="mb-2 text-coolGray-500 font-medium">John Doe &bull; 19 Jan 2022</p>
        <a class="inline-block mb-4 text-2xl leading-tight text-coolGray-800 hover:text-coolGray-900 font-bold hover:underline" href="#">A small business is only as good as its tools and it is totally true.</a>
        <p class="mb-4 text-base md:text-lg text-coolGray-400 font-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools...</p>
        <a class="inline-block py-1 px-3 text-xs leading-5 text-green-500 hover:text-green-600 font-medium uppercase bg-green-100 hover:bg-green-200 rounded-full shadow-sm" href="#">Technology</a>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/effect5.jpg" alt="">
        </a>

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

Tailwind CSS

Flex

<section class="bg-white p-8 pb-6">
  <div class="flex flex-wrap items-center justify-between pb-6 -mx-2">
    <div class="w-auto px-2">
      <div class="flex flex-wrap items-end">
        <div class="w-auto mr-3">
          <h2 class="text-lg font-semibold">Section heading title</h2>
        </div>
        <div class="relative bottom-px pb-px w-auto">
          <p class="text-xs font-medium text-coolGray-500">Small subtext</p>
        </div>
      </div>
    </div>
    <div class="w-auto px-2">
      <a href="#">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="#D5DAE1"></path>
        </svg>
      </a>
    </div>
  </div>
  <div class="border-b border-coolGray-100"></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 #3613

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 items-center justify-center lg:justify-between -mx-4">
        <div class="w-auto px-4 order-last lg:order-first">
          <button class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-white hover:bg-coolGray-100">
            <svg width="12" height="14" viewbox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.9999 6H3.4099L6.7099 2.71C6.8982 2.5217 7.00399 2.2663 7.00399 2C7.00399 1.7337 6.8982 1.47831 6.7099 1.29C6.52159 1.1017 6.2662 0.995911 5.9999 0.995911C5.73359 0.995911 5.4782 1.1017 5.2899 1.29L0.289896 6.29C0.198856 6.38511 0.127491 6.49725 0.0798963 6.62C-0.0201217 6.86346 -0.0201217 7.13654 0.0798963 7.38C0.127491 7.50275 0.198856 7.6149 0.289896 7.71L5.2899 12.71C5.38286 12.8037 5.49346 12.8781 5.61532 12.9289C5.73718 12.9797 5.86788 13.0058 5.9999 13.0058C6.13191 13.0058 6.26261 12.9797 6.38447 12.9289C6.50633 12.8781 6.61693 12.8037 6.7099 12.71C6.80363 12.617 6.87802 12.5064 6.92879 12.3846C6.97956 12.2627 7.00569 12.132 7.00569 12C7.00569 11.868 6.97956 11.7373 6.92879 11.6154C6.87802 11.4936 6.80363 11.383 6.7099 11.29L3.4099 8H10.9999C11.2651 8 11.5195 7.89465 11.707 7.70711C11.8945 7.51957 11.9999 7.26522 11.9999 7C11.9999 6.73479 11.8945 6.48043 11.707 6.2929C11.5195 6.10536 11.2651 6 10.9999 6Z" fill="#404F65"></path>
            </svg>
          </button>
        </div>
        <div class="w-full lg:w-2/6 px-4 mb-12 lg:mb-0">
          <div class="flex items-center">
            <img class="w-20 md:w-24 h-20 md:h-24 mr-6 rounded-full" src="flex-ui-assets/images/testimonials/avatar1.png" alt="">
            <div>
              <h3 class="mb-2 text-xl md:text-2xl font-semibold">Darren Dunlap</h3>
              <span class="text-lg text-coolGray-500 font-medium">CEO &amp; Founder at Flex.co</span>
            </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 Testimonials Component Generator

Tailwind Component #3614

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900 overflow-hidden" 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 md:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="max-w-md mx-auto">
          <h2 class="mb-8 text-4xl md:text-5xl font-heading font-bold text-white md:leading-15">Join 6,000+ startups growing with Flex</h2>
          <ul class="mb-8">
            <li class="flex items-center mb-4">
              <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
              <span class="text-lg md:text-xl font-heading text-coolGray-400">Mauris pellentesque congue libero nec</span>
            </li>
            <li class="flex items-center mb-4">
              <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
              <span class="text-lg md:text-xl font-heading text-coolGray-400">Suspendisse mollis tincidunt</span>
            </li>
            <li class="flex items-center">
              <img class="mr-3" src="flex-ui-assets/elements/cta/checkbox-green.svg" alt="">
              <span class="text-lg md:text-xl font-heading text-coolGray-400">Praesent varius justo vel justo pulvinar</span>
            </li>
          </ul>
          <div class="flex flex-wrap items-center"><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-coolGray-100 bg-coolGray-700 hover:bg-coolGray-800 font-medium focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Learn More</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-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></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Call to action Component Generator

Tailwind Component #3615

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="relative py-11 md:py-36 px-14 mx-auto bg-coolGray-900 rounded-md overflow-hidden">
      <img class="absolute z-10 left-4 top-4" src="flex-ui-assets/elements/dashboard/banners/dots-purple.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 top-0 -right-16 object-cover" src="flex-ui-assets/elements/dashboard/banners/wave.svg" alt="">
      <img class="absolute h-64 -bottom-20 -left-16 object-cover" src="flex-ui-assets/elements/dashboard/banners/wave.svg" alt="">
      <div class="relative z-10 text-center">
        <h2 class="mb-6 text-2xl font-bold text-white tracking-tighter">Ideal banner asset for your dashboard project</h2>
        <p class="mb-6 font-semibold text-coolGray-300">Go global with our UI Resources and solutions</p>
        <button class="block mx-auto px-4 py-3 font-medium text-base text-white bg-green-500 hover:bg-green-600 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 #3616

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-10">
        <div class="max-w-md">
          <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">Our Clients</span>
          <h3 class="mb-8 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap justify-center -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-50 shadow-md">
              <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
            <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-50 shadow-md">
              <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
            <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-50 shadow-md">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Logo clouds Component Generator

Tailwind Component #3617

Tailwind CSS

Flex

<section class="py-20 xl: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 items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md: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">Numbers</span>
        <h3 class="mb-12 text-4xl md:text-5xl text-white font-bold tracking-tighter">We believe in numbers</h3>
        <div class="flex flex-wrap justify-center -mx-4 text-center">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">235.000</h2>
            <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</h3>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">$10m</h2>
            <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">APR</h3>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
            <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">+50.000</h2>
            <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</h3>
          </div>
          <div class="w-full md:w-1/2 px-4">
            <h2 class="mb-4 text-4xl lg:text-5xl text-white font-bold tracking-tighter">3.500</h2>
            <h3 class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</h3>
          </div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #3618

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="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>
  <div class="py-24 md:py-32 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">
      <div class="flex flex-wrap lg:items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md: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">Features</span>
          <h1 class="mb-8 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h1>
          <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <a class="inline-block py-4 px-5 w-full md:w-auto text-base leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative mx-auto md:mr-0 max-w-max">
            <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img src="flex-ui-assets/images/features/stock2.png" alt="">
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #3619

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <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-24 md:pt-36 bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
          <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Get our Free Mobile App</h3>
          <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <div class="flex flex-wrap">
            <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-4">
              <img src="flex-ui-assets/elements/app-store-dark.svg" alt="">
            </div>
            <div class="w-full md:w-auto">
              <img src="flex-ui-assets/elements/google-play-dark.svg" alt="">
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative flex flex-row items-center mx-auto md:mr-0 max-w-max">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Application Component Generator

Tailwind Component #3620

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="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>
  <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 items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-10">
          <div class="max-w-md">
            <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">Our Clients</span>
            <h3 class="mb-8 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
            <p class="text-lg md:text-xl text-coolGray-500 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap justify-center -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
                <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
              </div>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-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 Logo clouds 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 #3601

Get the code for 13,400+ components

Tailwind Component #3602

Get the code for 13,400+ components

Tailwind Component #3603

Get the code for 13,400+ components

Tailwind Component #3604

Get the code for 13,400+ components

Tailwind Component #3605

Get the code for 13,400+ components

Tailwind Component #3606

Get the code for 13,400+ components

Tailwind Component #3607

Get the code for 13,400+ components

Tailwind Component #3608

Get the code for 13,400+ components

Tailwind Component #3609

Get the code for 13,400+ components

Tailwind Component #3610

Get the code for 13,400+ components

Tailwind Component #3611

Get the code for 13,400+ components

Tailwind Component #3612

Get the code for 13,400+ components

Tailwind Component #3613

Get the code for 13,400+ components

Tailwind Component #3614

Get the code for 13,400+ components

Tailwind Component #3615

Get the code for 13,400+ components

Tailwind Component #3616

Get the code for 13,400+ components

Tailwind Component #3617

Get the code for 13,400+ components

Tailwind Component #3618

Get the code for 13,400+ components

Tailwind Component #3619

Get the code for 13,400+ components

Tailwind Component #3620

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