UI Components in Flex library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

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

New to Shuffle? Try our tools:

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

Components

Tailwind Component #441

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900">
  <div class="container px-4 mx-auto">
    <div class="relative py-16 md:py-32 px-6 text-center bg-white overflow-hidden rounded-7xl" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
      <div class="relative z-10 mx-auto md:max-w-2xl">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Be the first to know when we launch</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <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>
        </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="">
    </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

Newsletter generator

Tailwind Component #442

Tailwind CSS

Flex

<section class="py-24 md:pb-28 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="mb-16">
      <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">Quotes</span>
      <h2 class="mb-4 text-4xl md:text-5xl text-white leading-tight font-semibold tracking-tighter">Testimonial from Flex app users</h2>
      <p class="text-xl font-medium text-coolGray-400">With Flex, you can build websites without writing code.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
          <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
          <h4 class="mb-1 text-lg font-semibold">Macauley Herring</h4>
          <p class="text-lg text-coolGray-400">CEO &amp; Founder at Flex.co</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-md">
          <h3 class="pb-14 mb-auto text-xl md:text-2xl font-medium">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</h3>
          <h4 class="mb-1 text-lg font-semibold">Ivan Mathews</h4>
          <p class="text-lg text-coolGray-400">CTO at Flex.co</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="flex flex-col h-full p-8 bg-white shadow-md rounded-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

Testimonials generator

Tailwind Component #443

Tailwind CSS

Flex

<section class="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="max-w-4xl mb-16">
      <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">FAQ</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap pb-16 -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What shipping options do you have?</h3>
          <p class="text-coolGray-500 font-medium">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What payment methods do you accept?</h3>
          <p class="text-coolGray-500 font-medium">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ generator

Tailwind Component #444

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 py-7 bg-white border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="w-auto p-2">
          <h3 class="font-medium text-sm text-coolGray-900">Simple notification action</h3>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-4">
            <div class="w-auto p-4"><a class="font-medium text-sm text-green-600 hover:text-green-700" href="#">Undo</a></div>
            <div class="w-auto p-4">
              <a href="#">
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.93999 8L13.14 3.80667C13.2655 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2655 2.98554 13.14 2.86C13.0145 2.73446 12.8442 2.66394 12.6667 2.66394C12.4891 2.66394 12.3189 2.73446 12.1933 2.86L8 7.06L3.80666 2.86C3.68113 2.73446 3.51086 2.66394 3.33333 2.66394C3.15579 2.66394 2.98553 2.73446 2.85999 2.86C2.73446 2.98554 2.66393 3.1558 2.66393 3.33333C2.66393 3.51087 2.73446 3.68113 2.85999 3.80667L7.06 8L2.85999 12.1933C2.79751 12.2553 2.74791 12.329 2.71407 12.4103C2.68022 12.4915 2.6628 12.5787 2.6628 12.6667C2.6628 12.7547 2.68022 12.8418 2.71407 12.9231C2.74791 13.0043 2.79751 13.078 2.85999 13.14C2.92197 13.2025 2.9957 13.2521 3.07694 13.2859C3.15818 13.3198 3.24532 13.3372 3.33333 13.3372C3.42134 13.3372 3.50847 13.3198 3.58971 13.2859C3.67095 13.2521 3.74469 13.2025 3.80666 13.14L8 8.94L12.1933 13.14C12.2553 13.2025 12.329 13.2521 12.4103 13.2859C12.4915 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8418 13.3198 12.923 13.2859C13.0043 13.2521 13.078 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.2859 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.2859 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.93999 8Z" fill="#8896AB"></path>
                </svg>
              </a>
            </div>
          </div>
        </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

Notifications generator

Tailwind Component #445

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <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 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 -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="relative mx-auto md:ml-0 max-w-max">
            <img class="absolute z-10 -right-8 -top-8 w-28 md:w-auto" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -left-10 -bottom-8 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img src="flex-ui-assets/images/how-it-works/stock.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <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">How it works</span>
          <h2 class="mb-12 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h2>
          <div class="flex flex-wrap -mx-4 text-center md:text-left">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-white bg-green-500 font-semibold rounded-full">1</div>
              <h3 class="mb-2 text-xl font-bold">Custom analytics</h3>
              <p class="font-medium text-coolGray-500">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

How it works generator

Tailwind Component #446

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">
      <h2 class="text-lg font-semibold">Section heading title</h2>
    </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>
  <ul class="flex flex-wrap border-b border-coolGray-100">
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Active</a></li>
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Upcoming</a></li>
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Saved</a></li>
    <li><a class="block px-4 pb-4 text-sm font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">Archived</a></li>
  </ul>
</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

Navbar generator

Tailwind Component #447

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <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 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="xl:max-w-4xl mb-18 md:mb-16 mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-50 bg-green-500 font-medium uppercase rounded-full">Get Started</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-heading font-bold">The fastest way from idea to live site. Period.</h1>
        <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-heading">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <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 class="relative max-w-4xl mx-auto">
        <img class="absolute top-0 left-0 -mt-6 lg:-mt-12 -ml-6 lg:-ml-12 w-20 lg:w-auto z-10" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
        <img class="absolute bottom-0 right-0 -mb-6 lg:-mb-10-mr-6 lg:-mr-12 w-20 lg:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
        <img class="relative" src="flex-ui-assets/elements/cta/men-computer-placeholder.png" alt="">
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-900">
    <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>

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

Call to action generator

Tailwind Component #448

Tailwind CSS

Flex

<section class="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 justify-between -mx-4 mb-16">
      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
        <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">Team</span>
          <h3 class="mb-4 text-4xl md:text-5xl font-bold tracking-tighter">Meet our team</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>
      <div class="w-full md:w-auto px-4">
        <div class="flex flex-wrap justify-center">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><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="#">Open Positions</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="#">About Us</a></div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-max mx-auto">
          <img class="block mb-8" src="flex-ui-assets/images/teams/photo-employee1.png" alt="">
          <h3 class="mb-2 text-3xl md:text-4xl leading-tight font-semibold">Macauley Herring</h3>
          <span class="text-lg font-medium text-green-500">CEO &amp; Founder</span>
        </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

Team generator

Tailwind Component #449

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full lg:w-1/2 p-3">
        <div class="h-full p-6 pb-0 border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h2 class="text-coolGray-900 text-lg font-semibold">Acquisition Channels</h2>
            </div>
            <div class="w-auto p-2">
              <button class="flex flex-wrap justify-center w-full px-4 py-2 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">
                <p>View report</p>
              </button>
            </div>
          </div>
          <div class="relative top-9">
            <div class="chart-graph7-stacked"></div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-3">
        <div class="h-full p-6 pb-0 border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
          <div class="flex flex-wrap items-center justify-between -m-2 mb-3">
            <div class="w-auto p-2">

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

Graphs generator

Tailwind Component #450

Tailwind CSS

Flex

<section class="py-20 xl:pt-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">
    <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-600">Trusted by the top companies in this industry</h3>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo-grey.svg" alt="">
        </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

Logo clouds generator

Tailwind Component #451

Tailwind CSS

Flex

<section class="pt-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="max-w-4xl mb-16">
      <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">FAQ</span>
      <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="flex flex-wrap pb-16 -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What shipping options do you have?</h3>
          <p class="text-coolGray-500 font-medium">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
        <div class="md:max-w-xs">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
            <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
          </div>
          <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What payment methods do you accept?</h3>
          <p class="text-coolGray-500 font-medium">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ generator

Tailwind Component #452

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white rounded-md shadow-lg">
      <div class="flex flex-wrap items-center justify-between -mx-2">
        <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
          <h2 class="text-lg text-coolGray-900 font-semibold">Card heading title</h2>
        </div>
        <div class="w-full md:w-1/2 px-2">
          <div class="flex flex-wrap justify-end -m-2">
            <div class="w-full md:w-auto p-2">
              <button class="w-full px-4 py-2 text-sm text-coolGray-500 font-medium bg-white border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">Button Secondary</button>
            </div>
            <div class="w-full md:w-auto p-2">
              <button class="w-full px-4 py-2 text-sm text-white font-medium bg-green-500 hover:bg-green-600 border border-green-600 rounded-md shadow-button">Button CTA</button>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-6 mt-6 border-t border-coolGray-100"></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

Cards generator

Tailwind Component #453

Tailwind CSS

Flex

<section class="pb-16 md:pb-24 bg-coolGray-50">
  <div class="pt-16 md:pt-24 pb-12 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-repeat: no-repeat; background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-2xl mx-auto text-center">
        <div class="flex items-center justify-center">
          <p class="inline-block text-green-500 font-medium">John Doe</p>
          <span class="mx-1 text-green-500">&bull;</span>
          <p class="inline-block text-green-500 font-medium">19 Jan 2022</p>
        </div>
        <h2 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Lorem ipsum dolor sit amet</h2>
        <p class="mb-6 text-lg md:text-xl font-medium text-coolGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="inline-block py-1 px-3 text-xs leading-5 text-green-900 font-medium uppercase bg-green-100 rounded-full shadow-sm">Technology</div>
      </div>
    </div>
  </div>
  <div class="relative">
    <div class="absolute w-full h-1/2 bg-coolGray-900"></div>
    <div class="container relative px-4 mx-auto">
      <div class="mb-10 mx-auto max-w-max overflow-hidden rounded-lg">
        <img src="flex-ui-assets/images/blog-content/content-photo1.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: center top;">

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

Content generator

Tailwind Component #454

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">
    <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-300">Trusted by the top companies in this industry</h3>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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/symtric-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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/wishelp-logo-grey.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md: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/resecurb-logo-grey.svg" alt="">
        </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

Logo clouds generator

Tailwind Component #455

Tailwind CSS

Flex

<section class="py-24 md:py-32 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="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>
        <div class="flex flex-wrap items-center justify-between mb-6">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #456

Tailwind CSS

Flex

<section class="py-20 xl:py-24 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="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">Pricing</span>
      <h3 class="mb-4 text-3xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">Pricing that scales with your business immediately.</p>
      <div class="flex mb-12 mx-auto max-w-max border border-coolGray-200 overflow-hidden rounded-md shadow-lg"><a class="py-3 px-5 text-sm text-green-500 bg-white font-medium border-r border-coolGray-200" href="#">Billed Monthly</a><a class="py-3 px-5 text-sm text-coolGray-500 bg-coolGray-50 font-medium" href="#">Billed Annually</a></div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col pt-8 pb-8 bg-coolGray-50 rounded-md shadow-md hover:scale-105 transition duration-500">
          <div class="flex items-center justify-between px-8">
            <div>
              <h3 class="text-2xl md:text-3xl text-coolGray-800 font-semibold tracking-tighter">Basic plan</h3>
              <p class="text-coolGray-400 font-medium">For bigger teams</p>
            </div>
            <div>
              <span class="relative -top-10 right-1 text-3xl text-coolGray-900 font-bold">$</span>
              <span class="text-6xl md:text-7xl text-coolGray-900 font-semibold tracking-tighter">99</span>
              <span class="inline-block ml-1 text-coolGray-500 font-semibold">/mo</span>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
          <ul class="self-start px-8 pt-8 pb-16">

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

Pricing generator

Tailwind Component #457

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900">
  <div class="container px-4 mx-auto">
    <div class="relative py-16 md:py-32 px-6 text-center bg-coolGray-50 overflow-hidden rounded-7xl" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
      <div class="relative z-10 mx-auto md:max-w-2xl">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Be the first to know when we launch</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <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>
        </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="">
    </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

Newsletter generator

Tailwind Component #458

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="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <img class="absolute top-6 left-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg">
    <img class="absolute bottom-6 right-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg">
    <div class="container relative z-10 px-4 mx-auto">
      <div class="mx-auto max-w-xl text-center">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter">Sign up for our newsletter</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <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

Newsletter generator

Tailwind Component #459

Tailwind CSS

Flex

<section class="py-24 bg-white">
  <div class="container px-4 mx-auto">
    <div class="relative py-16 md:py-32 px-6 text-center bg-coolGray-900 overflow-hidden rounded-7xl" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
      <div class="relative z-10 mx-auto md:max-w-2xl">
        <h3 class="mb-4 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 text-coolGray-400 font-medium">Stay in the loop with everything you need to know.</p>
        <div class="mx-auto md:max-w-md text-left">
          <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>
        </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="">
    </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

Newsletter generator

Tailwind Component #460

Tailwind CSS

Flex

<section class="relative py-16 bg-coolGray-900">
  <div class="absolute bottom-0 left-0 h-1/2 w-full bg-coolGray-100"></div>
  <div class="container px-4 mx-auto">
    <div class="relative py-16 px-4 md:px-24 bg-coolGray-50 rounded-xl">
      <img class="absolute top-0 left-0 w-full h-full object-cover" src="flex-ui-assets/elements/pattern-light1.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 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-500">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>
    </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

Call to action 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

UI Components – Flex Library

Framework

UI Library

Components

Tailwind Component #441

Get the code for 13,400+ components

Tailwind Component #442

Get the code for 13,400+ components

Tailwind Component #443

Get the code for 13,400+ components

Tailwind Component #444

Get the code for 13,400+ components

Tailwind Component #445

Get the code for 13,400+ components

Tailwind Component #446

Get the code for 13,400+ components

Tailwind Component #447

Get the code for 13,400+ components

Tailwind Component #448

Get the code for 13,400+ components

Tailwind Component #449

Get the code for 13,400+ components

Tailwind Component #450

Get the code for 13,400+ components

Tailwind Component #451

Get the code for 13,400+ components

Tailwind Component #452

Get the code for 13,400+ components

Tailwind Component #453

Get the code for 13,400+ components

Tailwind Component #454

Get the code for 13,400+ components

Tailwind Component #455

Get the code for 13,400+ components

Tailwind Component #456

Get the code for 13,400+ components

Tailwind Component #457

Get the code for 13,400+ components

Tailwind Component #458

Get the code for 13,400+ components

Tailwind Component #459

Get the code for 13,400+ components

Tailwind Component #460

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support