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

Tailwind CSS

Flex

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

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

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 xl: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="flex flex-wrap -mx-4">
      <div class="w-full px-4 mb-10">
        <div class="flex flex-wrap justify-between items-center">
          <div class="w-full md:w-1/2 mb-10 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">Rich text</span>
            <h3 class="mb-4 text-3xl md:text-4xl text-white font-bold tracking-tighter">Beautiful tool that helps you</h3>
            <p class="text-lg md:text-xl leading-8 text-coolGray-400 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
          </div>
          <div class="w-full md:w-auto">
            <div class="flex flex-wrap justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-coolGray-50 bg-coolGray-700 hover:bg-coolGray-600 rounded-md" href="#">Learn More</a></div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        <p class="text-lg font-medium leading-7 text-coolGray-400">Flex is the only saas business platform that lets you run your business on one platform. Flex is the only saas business platform that lets you run your business on one platform.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">
          <span>With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</span>
          <ol class="mb-5 list-decimal list-inside text-lg font-medium leading-7 text-coolGray-400">

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

Rich text generator

Tailwind Component #263

Tailwind CSS

Flex

<section class="py-24 md:py-28 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 -mx-4">
      <div class="w-full md:w-1/3 px-4">
        <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
          <div class="inline-flex h-16 w-16 mb-7 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
            <svg width="24" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-3 text-xl md:text-2xl leading-tight font-bold">Measure your performance</h3>
          <p class="text-coolGray-500 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4">
        <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
          <div class="inline-flex h-16 w-16 mb-7 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
            <svg width="22" height="12" viewbox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.71 1.29C20.617 1.19627 20.5064 1.12188 20.3846 1.07111C20.2627 1.02034 20.132 0.994202 20 0.994202C19.868 0.994202 19.7373 1.02034 19.6154 1.07111C19.4936 1.12188 19.383 1.19627 19.29 1.29L13 7.59L8.71 3.29C8.61704 3.19627 8.50644 3.12188 8.38458 3.07111C8.26272 3.02034 8.13201 2.9942 8 2.9942C7.86799 2.9942 7.73728 3.02034 7.61542 3.07111C7.49356 3.12188 7.38296 3.19627 7.29 3.29L1.29 9.29C1.19627 9.38296 1.12188 9.49356 1.07111 9.61542C1.02034 9.73728 0.994202 9.86799 0.994202 10C0.994202 10.132 1.02034 10.2627 1.07111 10.3846C1.12188 10.5064 1.19627 10.617 1.29 10.71C1.38296 10.8037 1.49356 10.8781 1.61542 10.9289C1.73728 10.9797 1.86799 11.0058 2 11.0058C2.13201 11.0058 2.26272 10.9797 2.38458 10.9289C2.50644 10.8781 2.61704 10.8037 2.71 10.71L8 5.41L12.29 9.71C12.383 9.80373 12.4936 9.87812 12.6154 9.92889C12.7373 9.97966 12.868 10.0058 13 10.0058C13.132 10.0058 13.2627 9.97966 13.3846 9.92889C13.5064 9.87812 13.617 9.80373 13.71 9.71L20.71 2.71C20.8037 2.61704 20.8781 2.50644 20.9289 2.38458C20.9797 2.26272 21.0058 2.13201 21.0058 2C21.0058 1.86799 20.9797 1.73728 20.9289 1.61542C20.8781 1.49356 20.8037 1.38296 20.71 1.29Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-3 text-xl md:text-2xl leading-tight font-bold">Custom analytics</h3>
          <p class="text-coolGray-500 font-medium">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Features generator

Tailwind Component #264

Tailwind CSS

Flex

<section class="bg-white p-8 pt-7 pb-6">
  <div class="flex flex-wrap items-center justify-between pb-5 -mx-2">
    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
      <h2 class="text-lg font-semibold">Section 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="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

Navbar generator

Tailwind Component #265

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 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <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">How it works</span>
          <h2 class="mb-6 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h2>
          <p class="text-lg md:text-xl text-coolGray-400 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/2 px-4">
          <div class="relative mx-auto md:mr-0 max-w-max overflow-hidden rounded-7xl">
            <img src="flex-ui-assets/images/how-it-works/placeholder-video.png" alt="">
            <video class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 min-h-full min-w-full max-w-none" poster="flex-ui-assets/images/testimonials/video-frame.jpeg" muted="">
              <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
            </video>
            <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full" href="#">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.5 11.13L5.50001 3.05C5.34799 2.96223 5.17554 2.91603 5.00001 2.91603C4.82447 2.91603 4.65203 2.96223 4.50001 3.05C4.3474 3.1381 4.22079 3.26497 4.13299 3.41775C4.04518 3.57052 3.99931 3.74379 4.00001 3.92V20.08C3.99931 20.2562 4.04518 20.4295 4.13299 20.5823C4.22079 20.735 4.3474 20.8619 4.50001 20.95C4.65203 21.0378 4.82447 21.084 5.00001 21.084C5.17554 21.084 5.34799 21.0378 5.50001 20.95L19.5 12.87C19.6539 12.7828 19.7819 12.6563 19.871 12.5035C19.96 12.3506 20.007 12.1769 20.007 12C20.007 11.8231 19.96 11.6494 19.871 11.4965C19.7819 11.3437 19.6539 11.2172 19.5 11.13ZM6.00001 18.35V5.65L17 12L6.00001 18.35Z" fill="white"></path>
              </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

How it works generator

Tailwind Component #266

Tailwind CSS

Flex

<section class="py-20 xl:pt-24 xl:pb-28 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 -mx-4">
      <div class="w-full px-4 mb-10">
        <div class="flex flex-wrap justify-between items-center">
          <div class="w-full md:w-1/2 mb-10 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">Rich text</span>
            <h3 class="mb-4 text-3xl md:text-4xl text-coolGray-900 font-bold tracking-tighter">Beautiful tool that helps you</h3>
            <p class="text-lg md:text-xl leading-8 text-coolGray-500 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
          </div>
          <div class="w-full md:w-auto">
            <div class="flex flex-wrap justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-coolGray-500 bg-coolGray-50 hover:bg-coolGray-100 rounded-md" href="#">Learn More</a></div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        <p class="text-lg font-medium leading-7 text-coolGray-500">Flex is the only saas business platform that lets you run your business on one platform. Flex is the only saas business platform that lets you run your business on one platform.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <p class="mb-5 text-lg font-medium leading-7 text-coolGray-500">
          <span>With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</span>
          <ol class="mb-5 list-decimal list-inside text-lg font-medium leading-7 text-coolGray-500">

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

Rich text generator

Tailwind Component #267

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 justify-center text-center -mx-4">
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 text-4xl md:text-5xl font-bold text-green-600 tracking-tighter">235.000</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-green-600 tracking-tighter">$10m</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">APR</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-green-600 tracking-tighter">+50.000</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-green-600 tracking-tighter">3.500</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</p>
      </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

Stats generator

Tailwind Component #268

Tailwind CSS

Flex

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

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

Error alert banner with bulleted message list

A full-width light red alert banner displaying an error icon, a bold heading reading 'An example of an error warning', and a bulleted list of two error detail lines in red text. A close (X) button sits at the top right corner of the banner.

Alert generator

Tailwind Component #269

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="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-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full px-4 mb-10">
          <div class="flex flex-wrap justify-between items-center">
            <div class="w-full md:w-1/2 mb-10 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">Rich text</span>
              <h3 class="mb-4 text-3xl md:text-4xl text-white font-bold tracking-tighter">Beautiful tool that helps you</h3>
              <p class="text-lg md:text-xl leading-8 text-coolGray-400 font-semibold">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
            </div>
            <div class="w-full md:w-auto">
              <div class="flex flex-wrap justify-center items-center -mb-2"><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto md:mr-5 text-lg leading-7 text-coolGray-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a><a class="inline-block py-3 px-6 mb-2 w-full md:w-auto text-lg leading-7 font-medium text-center text-white bg-coolGray-700 hover:bg-coolGray-600 rounded-md" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-5 lg:mb-0">
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <p class="mb-5 text-lg font-medium leading-7 text-coolGray-400">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</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

Rich text generator

Tailwind Component #270

Tailwind CSS

Flex

<section class="relative py-24 md:py-32">
  <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 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-14 md:mb-0">
        <div class="max-w-md">
          <h2 class="mb-4 text-3xl md:text-4xl font-heading font-bold">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 md:w-1/2 px-4">
        <div class="flex flex-wrap items-center md: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>
</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

Tailwind Component #271

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">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-grey-light.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-grey-light.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 lg:mb-0">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo-grey-light.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo-grey-light.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4">
        <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/welytics-logo-grey-light.svg" alt="">
      </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

Logo clouds generator

Tailwind Component #272

Tailwind CSS

Flex

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 w-full bg-coolGray-50 max-w-3xl border border-coolGray-100 rounded-md shadow-md">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
        <p class="mb-4 text-coolGray-500 font-medium">We use third-party cookies in order to personalise your experience</p>
        <a class="flex items-center font-medium text-green-500 hover:text-green-600" href="#">
          <span class="mr-2">Read our cookie policy</span>
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="flex flex-wrap justify-end">
          <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-3 px-5 w-full leading-5 text-coolGray-800 bg-white hover:bg-coolGray-100 font-medium text-center focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">Decline</a></div>
          <div class="w-full md:w-auto py-1 md:py-0"><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="#">Allow</a></div>
        </div>
      </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

Cookies generator

Tailwind Component #273

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-20 bg-coolGray-50">
    <div class="relative 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-14 md: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 md:w-1/2 px-4">
          <div class="flex flex-wrap items-center md: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>
  <div class="wave wave-bottom w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.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 #274

Tailwind CSS

Flex

<section class="relative py-24 md:py-40 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 items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <img class="mx-auto" src="flex-ui-assets/images/http-codes/dog-error.png" alt="">
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="md:max-w-xl text-center md:text-left">
          <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">Error 404</span>
          <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</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 lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">Go back to Homepage</a></div>
            <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="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

HTTP codes generator

Tailwind Component #275

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 lg:mb-0">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">We are hiring</span>
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-medium font-bold tracking-tighter">Join our team</h3>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <a class="block p-10 mb-8 bg-coolGray-800 hover:bg-coolGray-700 hover:border-coolGray-600 border border-transparent rounded-md shadow-md transition duration-200" href="#">
          <span class="inline-block py-px px-2 mb-2 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Software Development</span>
          <h3 class="mb-2 text-lg md:text-xl text-white font-semibold">Front-end Developer</h3>
          <p class="mb-4 max-w-sm text-coolGray-400 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
          <div class="inline-flex mr-6 items-center">
            <svg class="text-coolGray-500" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="currentColor"></path>
            </svg>
            <span class="ml-2 text-coolGray-400 font-medium">Remote friendly</span>
          </div>
          <div class="inline-flex items-center">
            <svg class="text-coolGray-500" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"></path>
            </svg>
            <span class="ml-2 text-coolGray-400 font-medium">Full-time</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

Careers generator

Tailwind Component #276

Tailwind CSS

Flex

<section class="pt-20 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 mx-auto mb-16 text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Contact</span>
      <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
      <p class="text-lg md:text-xl text-coolGray-500 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
    </div>
    <div class="flex flex-wrap -mx-4 pb-16">
      <div class="w-full md:w-1/3 px-4 mb-10 md:mb-0">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
            <svg class="h-6 text-white" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-800 font-bold">Email</h3>
          <a class="text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4 mb-10 md:mb-0">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
            <svg class="h-6 text-white" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.41 13C19.1901 13 18.96 12.93 18.74 12.88C18.2949 12.7805 17.8572 12.6501 17.43 12.49C16.9661 12.3212 16.4562 12.33 15.9984 12.5146C15.5405 12.6992 15.1671 13.0466 14.95 13.49L14.73 13.95C13.7589 13.3992 12.8617 12.7271 12.0601 11.95C11.2829 11.1484 10.6108 10.2512 10.0601 9.28L10.5201 9.07C10.9634 8.85292 11.3108 8.47953 11.4954 8.02169C11.6801 7.56385 11.6888 7.05391 11.5201 6.59C11.3612 6.15903 11.231 5.71808 11.13 5.27C11.08 5.05 11.04 4.82 11.01 4.6C10.8886 3.89562 10.5197 3.25774 9.96967 2.80124C9.41967 2.34474 8.72475 2.09961 8.01005 2.11H5.00005C4.5773 2.10945 4.1592 2.19825 3.77317 2.37058C3.38714 2.54292 3.04189 2.7949 2.76005 3.11C2.47237 3.43365 2.25817 3.81575 2.13215 4.23004C2.00614 4.64432 1.97131 5.08098 2.03005 5.51C2.57364 9.67214 4.47526 13.5387 7.44005 16.51C10.4114 19.4748 14.2779 21.3764 18.4401 21.92C18.5699 21.9299 18.7002 21.9299 18.83 21.92C19.5675 21.9211 20.2794 21.6505 20.83 21.16C21.1452 20.8782 21.3971 20.5329 21.5695 20.1469C21.7418 19.7609 21.8306 19.3428 21.83 18.92V15.92C21.8247 15.229 21.5809 14.5611 21.14 14.0291C20.6991 13.4971 20.088 13.1336 19.41 13ZM19.9 19C19.8997 19.1395 19.8702 19.2775 19.8134 19.4049C19.7565 19.5324 19.6736 19.6465 19.57 19.74C19.4604 19.8399 19.33 19.9141 19.1882 19.9573C19.0464 20.0006 18.8967 20.0117 18.75 19.99C15.0183 19.5026 11.5503 17.802 8.88005 15.15C6.20752 12.4775 4.49208 8.99737 4.00005 5.25C3.97833 5.10333 3.98949 4.95367 4.03272 4.81185C4.07596 4.67003 4.1502 4.5396 4.25005 4.43C4.34467 4.32515 4.46043 4.24154 4.5897 4.18466C4.71897 4.12778 4.85882 4.09892 5.00005 4.1H8.00005C8.23121 4.09435 8.45719 4.16898 8.63951 4.3112C8.82184 4.45341 8.94925 4.65442 9.00005 4.88C9.00005 5.15 9.09005 5.43 9.15005 5.7C9.26563 6.22386 9.41937 6.73857 9.61005 7.24L8.21005 7.9C7.96941 8.01046 7.78241 8.21185 7.69005 8.46C7.59003 8.70346 7.59003 8.97654 7.69005 9.22C9.12925 12.3028 11.6073 14.7808 14.69 16.22C14.9335 16.32 15.2066 16.32 15.45 16.22C15.6982 16.1276 15.8996 15.9406 16.01 15.7L16.64 14.3C17.156 14.4881 17.6838 14.6418 18.22 14.76C18.48 14.82 18.76 14.87 19.0301 14.91C19.2556 14.9608 19.4566 15.0882 19.5989 15.2705C19.7411 15.4529 19.8157 15.6788 19.81 15.91L19.9 19ZM14 2C13.7701 2 13.53 2 13.3 2C13.0348 2.02254 12.7894 2.14952 12.6178 2.353C12.4462 2.55647 12.3625 2.81978 12.385 3.085C12.4076 3.35022 12.5346 3.59562 12.738 3.76721C12.9415 3.93881 13.2048 4.02254 13.47 4H14C15.5913 4 17.1175 4.63214 18.2427 5.75736C19.3679 6.88258 20 8.4087 20 10C20 10.18 20 10.35 20 10.53C19.9779 10.7938 20.0612 11.0556 20.2318 11.2581C20.4024 11.4606 20.6463 11.5871 20.91 11.61H20.99C21.2404 11.611 21.482 11.5181 21.6671 11.3496C21.8523 11.1811 21.9675 10.9493 21.99 10.7C21.99 10.47 21.99 10.23 21.99 10C21.9901 7.88 21.1486 5.84668 19.6504 4.34668C18.1523 2.84667 16.12 2.00265 14 2ZM16 10C16 10.2652 16.1054 10.5196 16.2929 10.7071C16.4805 10.8946 16.7348 11 17 11C17.2653 11 17.5196 10.8946 17.7072 10.7071C17.8947 10.5196 18 10.2652 18 10C18 8.93913 17.5786 7.92172 16.8285 7.17157C16.0783 6.42143 15.0609 6 14 6C13.7348 6 13.4805 6.10536 13.2929 6.29289C13.1054 6.48043 13 6.73478 13 7C13 7.26522 13.1054 7.51957 13.2929 7.70711C13.4805 7.89464 13.7348 8 14 8C14.5305 8 15.0392 8.21071 15.4143 8.58579C15.7893 8.96086 16 9.46957 16 10Z" 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

Contact generator

Tailwind Component #277

Tailwind CSS

Flex

<section class="py-20 xl:py-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="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-6 text-3xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <div class="flex items-center justify-center w-full mb-12">
        <a class="inline-block mr-4 text-lg md:text-xl text-coolGray-400 font-medium" href="#">Billed Monthly</a>
        <label class="flex items-center cursor-pointer rounded-full shadow-lg" for="toggle">
          <div class="relative">
            <input class="sr-only" id="toggleB" type="checkbox">
            <div class="block bg-green-500 w-20 h-9 rounded-full"></div>
            <div class="dot absolute right-1 top-1 bg-white w-7 h-7 rounded-full shadow-lg"></div>
          </div>
        </label>
        <a class="inline-block ml-4 text-lg md:text-xl text-coolGray-800 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 lg:w-1/3 p-4">
        <div class="flex flex-col pt-8 pb-8 h-full bg-coolGray-50 rounded-md shadow-md hover:scale-105 transition duration-500">
          <div class="px-8 text-center">
            <h3 class="mb-2 text-3xl md:text-4xl text-coolGray-800 font-semibold tracking-tighter">Small</h3>
            <p class="mb-6 text-coolGray-400 font-medium">For Individual Users</p>
            <div class="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

Pricing generator

Tailwind Component #278

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="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
      <div class="relative max-w-max">
        <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
        <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook2.png" alt="">
        <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
        <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
        <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
      </div>
    </div>
    <div class="container px-4 mx-auto">
      <div class="md:w-1/2 md:ml-auto pl-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
        <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Great work starts with your app</h3>
        <p class="mb-12 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>
        <div class="flex flex-wrap mb-10 text-center md:text-left">
          <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
            <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-coolGray-900 bg-green-500 rounded-lg">

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

Application generator

Tailwind Component #279

Tailwind CSS

Flex

<section class="overflow-hidden min-h-full">
  <div class="relative z-50 flex items-center justify-between xl:hidden bg-white border-b border-coolGray-100 px-8 py-5 -mx-3">
    <div class="w-auto px-3">
      <a class="block max-w-max" href="#">
        <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
      </a>
    </div>
    <div class="w-auto px-3">
      <button class="navbar-burger self-center ml-auto block xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-100" width="32" height="32" rx="6" fill="currentColor"></rect>
          <path class="text-coolGray-400" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="navbar-menu z-50 fixed top-0 hidden flex xl:flex flex-col justify-between bg-white border-r border-coolGray-100 max-w-xs w-9/12 h-full overflow-y-auto">
    <div class="navbar-backdrop fixed xl:hidden inset-0 bg-coolGray-900 opacity-60"></div>
    <div class="relative bg-white">
      <div class="fixed -left-4 p-8 pl-12 max-w-xs w-9/12 z-50 bg-white">
        <a class="block max-w-max" href="#">
          <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
        </a>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navigation (horizontal) generator

Tailwind Component #280

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="mb-16 text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
        <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Our team is the best in the business.</h3>
        <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
        <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 class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
          <div class="h-full py-8 px-10 bg-white rounded-md text-center">
            <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-2 text-2xl md:text-3xl leading-tight font-semibold">Macauley Herring</h3>
            <span class="inline-block mb-6 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <p class="mb-8 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</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

Team 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 #261

Get the code for 13,400+ components

Tailwind Component #262

Get the code for 13,400+ components

Tailwind Component #263

Get the code for 13,400+ components

Tailwind Component #264

Get the code for 13,400+ components

Tailwind Component #265

Get the code for 13,400+ components

Tailwind Component #266

Get the code for 13,400+ components

Tailwind Component #267

Get the code for 13,400+ components

Tailwind Component #268

Get the code for 13,400+ components

Error alert banner with bulleted message list

Tailwind Component #269

Get the code for 13,400+ components

Tailwind Component #270

Get the code for 13,400+ components

Tailwind Component #271

Get the code for 13,400+ components

Tailwind Component #272

Get the code for 13,400+ components

Tailwind Component #273

Get the code for 13,400+ components

Tailwind Component #274

Get the code for 13,400+ components

Tailwind Component #275

Get the code for 13,400+ components

Tailwind Component #276

Get the code for 13,400+ components

Tailwind Component #277

Get the code for 13,400+ components

Tailwind Component #278

Get the code for 13,400+ components

Tailwind Component #279

Get the code for 13,400+ components

Tailwind Component #280

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