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

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 md:pt-36 bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
          <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Get our Free Mobile App</h3>
          <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <div class="flex flex-wrap">
            <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-4">
              <img src="flex-ui-assets/elements/app-store-gray.svg" alt="">
            </div>
            <div class="w-full md:w-auto">
              <img src="flex-ui-assets/elements/google-play-gray.svg" alt="">
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative flex flex-row items-center mx-auto md:mr-0 max-w-max">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Application generator

Tailwind Component #222

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="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-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <div class="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-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Get Started</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight 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-500 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-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 #223

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonials generator

Tailwind Component #224

Tailwind CSS

Flex

<section class="py-24 md:py-32" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full 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 #225

Tailwind CSS

Flex

<div class="fixed top-0 left-0 w-full h-full px-4 py-16 md:py-28 bg-coolGray-900 bg-opacity-50 overflow-y-auto">
  <div class="max-w-4xl p-6 sm:p-10 mx-auto bg-coolGray-50 rounded-lg">
    <form action="">
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Name</label>
          <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="Your Name">
        </div>
        <div class="w-full md:w-1/2 px-4">
          <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Email</label>
          <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="email" placeholder="Your Email">
        </div>
      </div>
      <div class="mb-8">
        <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Card Details</label>
        <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="XXXX-XXXX-XXXX-XXXX">
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
          <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">Street Number</label>
          <input class="block h-12 w-full py-2 px-3 appearance-none border border-coolGray-200 rounded-lg shadow-md text-coolGray-300 leading-6 placeholder-coolGray-300 focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="Your Street Number">
        </div>
        <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
          <label class="block mb-2 text-coolGray-800 font-medium leading-6" for="">City</label>

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

Modals generator

Tailwind Component #226

Tailwind CSS

Flex

<section class="py-24 md:py-28 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/3 px-4">
        <div class="h-full p-8 text-center hover:bg-coolGray-700 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-coolGray-900 bg-green-500 rounded-lg">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 21.63H5C4.20435 21.63 3.44129 21.3139 2.87868 20.7513C2.31607 20.1887 2 19.4257 2 18.63V10.63C2 10.3648 1.89464 10.1104 1.70711 9.9229C1.51957 9.73536 1.26522 9.63 1 9.63C0.734784 9.63 0.48043 9.73536 0.292893 9.9229C0.105357 10.1104 0 10.3648 0 10.63L0 18.63C0 19.9561 0.526784 21.2279 1.46447 22.1655C2.40215 23.1032 3.67392 23.63 5 23.63H17C17.2652 23.63 17.5196 23.5246 17.7071 23.3371C17.8946 23.1496 18 22.8952 18 22.63C18 22.3648 17.8946 22.1104 17.7071 21.9229C17.5196 21.7354 17.2652 21.63 17 21.63ZM21 3.63H7C6.20435 3.63 5.44129 3.94608 4.87868 4.50868C4.31607 5.07129 4 5.83436 4 6.63V16.63C4 17.4257 4.31607 18.1887 4.87868 18.7513C5.44129 19.3139 6.20435 19.63 7 19.63H21C21.7956 19.63 22.5587 19.3139 23.1213 18.7513C23.6839 18.1887 24 17.4257 24 16.63V6.63C24 5.83436 23.6839 5.07129 23.1213 4.50868C22.5587 3.94608 21.7956 3.63 21 3.63ZM20.59 5.63L14.71 11.51C14.617 11.6037 14.5064 11.6781 14.3846 11.7289C14.2627 11.7797 14.132 11.8058 14 11.8058C13.868 11.8058 13.7373 11.7797 13.6154 11.7289C13.4936 11.6781 13.383 11.6037 13.29 11.51L7.41 5.63H20.59ZM22 16.63C22 16.8952 21.8946 17.1496 21.7071 17.3371C21.5196 17.5246 21.2652 17.63 21 17.63H7C6.73478 17.63 6.48043 17.5246 6.29289 17.3371C6.10536 17.1496 6 16.8952 6 16.63V7L11.88 12.88C12.4425 13.4418 13.205 13.7574 14 13.7574C14.795 13.7574 15.5575 13.4418 16.12 12.88L22 7V16.63Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-3 text-xl md:text-2xl leading-tight text-white font-bold">Measure your performance</h3>
          <p class="text-coolGray-400 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-coolGray-700 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-coolGray-900 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.7099 1.29C20.617 1.19627 20.5064 1.12188 20.3845 1.07111C20.2627 1.02034 20.132 0.994202 19.9999 0.994202C19.8679 0.994202 19.7372 1.02034 19.6154 1.07111C19.4935 1.12188 19.3829 1.19627 19.2899 1.29L12.9999 7.59L8.70994 3.29C8.61698 3.19627 8.50637 3.12188 8.38452 3.07111C8.26266 3.02034 8.13195 2.9942 7.99994 2.9942C7.86793 2.9942 7.73722 3.02034 7.61536 3.07111C7.4935 3.12188 7.3829 3.19627 7.28994 3.29L1.28994 9.29C1.19621 9.38296 1.12182 9.49356 1.07105 9.61542C1.02028 9.73728 0.994141 9.86799 0.994141 10C0.994141 10.132 1.02028 10.2627 1.07105 10.3846C1.12182 10.5064 1.19621 10.617 1.28994 10.71C1.3829 10.8037 1.4935 10.8781 1.61536 10.9289C1.73722 10.9797 1.86793 11.0058 1.99994 11.0058C2.13195 11.0058 2.26266 10.9797 2.38452 10.9289C2.50637 10.8781 2.61698 10.8037 2.70994 10.71L7.99994 5.41L12.2899 9.71C12.3829 9.80373 12.4935 9.87812 12.6154 9.92889C12.7372 9.97966 12.8679 10.0058 12.9999 10.0058C13.132 10.0058 13.2627 9.97966 13.3845 9.92889C13.5064 9.87812 13.617 9.80373 13.7099 9.71L20.7099 2.71C20.8037 2.61704 20.8781 2.50644 20.9288 2.38458C20.9796 2.26272 21.0057 2.13201 21.0057 2C21.0057 1.86799 20.9796 1.73728 20.9288 1.61542C20.8781 1.49356 20.8037 1.38296 20.7099 1.29Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-3 text-xl md:text-2xl leading-tight text-white font-bold">Custom analytics</h3>
          <p class="text-coolGray-400 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 #227

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto h-full border border-coolGray-100 bg-white rounded-md shadow-dashboard">
      <div class="p-6 border-b border-coolGray-100">
        <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
          <div class="w-auto p-2">
            <h2 class="text-coolGray-900 text-lg font-semibold">Active now</h2>
          </div>
          <div class="w-auto p-2">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 6.66667C7.73629 6.66667 7.47851 6.74487 7.25924 6.89138C7.03998 7.03788 6.86908 7.24612 6.76816 7.48976C6.66724 7.73339 6.64084 8.00148 6.69229 8.26012C6.74373 8.51876 6.87072 8.75634 7.05719 8.94281C7.24366 9.12928 7.48124 9.25627 7.73988 9.30772C7.99852 9.35916 8.26661 9.33276 8.51025 9.23184C8.75388 9.13092 8.96212 8.96003 9.10863 8.74076C9.25514 8.5215 9.33333 8.26371 9.33333 8C9.33333 7.64638 9.19286 7.30724 8.94281 7.05719C8.69276 6.80714 8.35362 6.66667 8 6.66667ZM3.33333 6.66667C3.06963 6.66667 2.81184 6.74487 2.59257 6.89138C2.37331 7.03788 2.20241 7.24612 2.10149 7.48976C2.00058 7.73339 1.97417 8.00148 2.02562 8.26012C2.07707 8.51876 2.20405 8.75634 2.39052 8.94281C2.57699 9.12928 2.81457 9.25627 3.07321 9.30772C3.33185 9.35916 3.59994 9.33276 3.84358 9.23184C4.08721 9.13092 4.29545 8.96003 4.44196 8.74076C4.58847 8.5215 4.66667 8.26371 4.66667 8C4.66667 7.64638 4.52619 7.30724 4.27614 7.05719C4.02609 6.80714 3.68696 6.66667 3.33333 6.66667ZM12.6667 6.66667C12.403 6.66667 12.1452 6.74487 11.9259 6.89138C11.7066 7.03788 11.5357 7.24612 11.4348 7.48976C11.3339 7.73339 11.3075 8.00148 11.359 8.26012C11.4104 8.51876 11.5374 8.75634 11.7239 8.94281C11.9103 9.12928 12.1479 9.25627 12.4065 9.30772C12.6652 9.35916 12.9333 9.33276 13.1769 9.23184C13.4205 9.13092 13.6288 8.96003 13.7753 8.74076C13.9218 8.5215 14 8.26371 14 8C14 7.64638 13.8595 7.30724 13.6095 7.05719C13.3594 6.80714 13.0203 6.66667 12.6667 6.66667Z" fill="#D5DAE1"></path>
            </svg>
          </div>
        </div>
        <div class="chart-graph1-radial-bar"></div>
      </div>
      <div class="p-6">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <p class="font-semibold text-2xl text-coolGray-900">$40,206.20</p>
          </div>
          <div class="w-auto p-2">
            <p class="flex items-center p-1 px-2 text-xs text-green-500 font-medium bg-green-100 rounded-full shadow-sm">
              <svg class="mr-0.5" width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Graphs generator

Tailwind Component #228

Tailwind CSS

Flex

<section class="py-24 md:pt-36 bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Get our Free Mobile App</h3>
        <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
        <div class="flex flex-wrap">
          <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-4">
            <img src="flex-ui-assets/elements/app-store-gray.svg" alt="">
          </div>
          <div class="w-full md:w-auto">
            <img src="flex-ui-assets/elements/google-play-gray.svg" alt="">
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="relative flex flex-row items-center mx-auto md:mr-0 max-w-max">
          <div class="relative max-w-max overflow-hidden">
            <img class="relative z-20 h-80 md:h-auto object-cover" src="flex-ui-assets/elements/applications/iphone-dark1.png" alt="">
            <img class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30 p-7 md:p-0 -mt-3 md:-mt-4 -ml-0 h-80 md:h-auto object-cover" src="flex-ui-assets/elements/applications/smartphone-ui.png">
          </div>
          <div class="relative z-10 hidden 2xl:block max-w-max 2xl:-ml-24">
            <img class="relative z-10 object-cover" src="flex-ui-assets/elements/applications/iphone-dark2.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Application generator

Tailwind Component #229

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Application generator

Tailwind Component #230

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonials generator

Tailwind Component #231

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="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-500 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-500 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-500 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-500 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 #232

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-900 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-400 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-white bg-coolGray-600 hover:bg-coolGray-700 font-medium text-center focus:ring-2 focus:ring-coolGray-600 focus:ring-opacity-50 border border-coolGray-800 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 #233

Tailwind CSS

Flex

<section class="relative py-24 md:py-32 bg-coolGray-900">
  <img class="absolute top-0 left-0 w-full h-full object-cover" src="flex-ui-assets/elements/pattern-dark.svg" alt="">
  <div class="relative 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 text-white">The fastest way from idea to live site. Period.</h2>
          <p class="text-lg md:text-xl font-heading font-medium text-coolGray-400">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
        </div>
      </div>
      <div class="w-full 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-100 bg-coolGray-700 hover:bg-coolGray-800 font-medium focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Learn More</a></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 #234

Tailwind CSS

Flex

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
      <h2 class="text-coolGray-900 text-lg font-semibold">Features Summary</h2>
      <div class="flex flex-wrap items-center justify-between -m-6">
        <div class="w-full lg:w-1/2 p-6">
          <div class="relative xl:top-4">
            <div class="chart-graph3-column"></div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 p-6">
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-1/2 p-2">
              <div class="h-full p-10 text-center border border-coolGray-100 rounded-md shadow-dashboard">
                <h2 class="font-medium text-5xl text-coolGray-900 tracking-tighter">21</h2>
                <p class="font-medium text-sm text-coolGray-500">New features</p>
              </div>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="h-full p-10 text-center border border-coolGray-100 rounded-md shadow-dashboard">
                <h2 class="font-medium text-5xl text-coolGray-900 tracking-tighter">145</h2>
                <p class="font-medium text-sm text-coolGray-500">Closed features</p>
              </div>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Graphs generator

Tailwind Component #235

Tailwind CSS

Flex

<section class="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="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-500 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 font-bold tracking-tighter">Gain more insight into how people use your</h2>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full md:w-1/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>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 text-center md:text-left">
      <div class="w-full md:w-1/2 md:w-1/3 px-4 mb-8">

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

Tailwind CSS

Flex

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Footers generator

Tailwind Component #237

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-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
          <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Sign up for our newsletter</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Stay in the loop with everything you need to know.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="mx-auto md:mr-0 md:max-w-md">
            <div class="flex flex-wrap mb-1">
              <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
              </div>
              <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
            </div>
            <span class="text-xs text-coolGray-400 font-medium">
              <span>We care about your data in our</span>
              <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Newsletter generator

Tailwind Component #238

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Sign up for our newsletter</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="mx-auto md:mr-0 md:max-w-md">
          <div class="flex flex-wrap mb-1">
            <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
              <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
            </div>
            <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
          </div>
          <span class="text-xs text-coolGray-500 font-medium">
            <span>We care about your data in our</span>
            <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
          </span>
        </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

Newsletter generator

Tailwind Component #239

Tailwind CSS

Flex

<div class="w-full md:w-1/2 xl:w-1/4 p-3">
  <div class="bg-white border border-coolGray-100 shadow-dashboard rounded-md">
    <div class="flex flex-col justify-center items-center px-4 pt-8 pb-6 border-b border-coolGray-100">
      <img class="mb-4" src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
      <h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
      <h3 class="mb-3 text-xs font-medium text-coolGray-400">johndoe@flex.co</h3>
      <button class="flex items-center px-4 py-2 font-medium text-sm text-white bg-green-500 hover:bg-green-600 rounded-md">
        <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.8333 3.33334H4.16666C3.50362 3.33334 2.86773 3.59673 2.39889 4.06557C1.93005 4.53441 1.66666 5.17029 1.66666 5.83334V14.1667C1.66666 14.8297 1.93005 15.4656 2.39889 15.9344C2.86773 16.4033 3.50362 16.6667 4.16666 16.6667H15.8333C16.4964 16.6667 17.1323 16.4033 17.6011 15.9344C18.0699 15.4656 18.3333 14.8297 18.3333 14.1667V5.83334C18.3333 5.17029 18.0699 4.53441 17.6011 4.06557C17.1323 3.59673 16.4964 3.33334 15.8333 3.33334V3.33334ZM4.16666 5H15.8333C16.0543 5 16.2663 5.0878 16.4226 5.24408C16.5789 5.40036 16.6667 5.61232 16.6667 5.83334L9.99999 9.9L3.33332 5.83334C3.33332 5.61232 3.42112 5.40036 3.5774 5.24408C3.73368 5.0878 3.94564 5 4.16666 5V5ZM16.6667 14.1667C16.6667 14.3877 16.5789 14.5996 16.4226 14.7559C16.2663 14.9122 16.0543 15 15.8333 15H4.16666C3.94564 15 3.73368 14.9122 3.5774 14.7559C3.42112 14.5996 3.33332 14.3877 3.33332 14.1667V7.73334L9.56666 11.5417C9.69334 11.6148 9.83704 11.6533 9.98332 11.6533C10.1296 11.6533 10.2733 11.6148 10.4 11.5417L16.6667 7.73334V14.1667Z" fill="#F0FDF4"></path>
        </svg>
        <p>Message</p>
      </button>
    </div>
    <div class="flex flex-wrap pt-4 pb-6 -m-2">
      <div class="w-full md:w-1/3 p-2">
        <div class="text-center">
          <p class="mb-1 text-xs text-coolGray-900 font-semibold">24</p>
          <p class="text-xs text-coolGray-400 font-medium">Posts</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-2">
        <div class="text-center">
          <p class="mb-1 text-xs text-coolGray-900 font-semibold">420</p>
          <p class="text-xs text-coolGray-400 font-medium">Following</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

Cards generator

Tailwind Component #240

Tailwind CSS

Flex

<section class="py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
        <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Sign up for our newsletter</h3>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="mx-auto md:mr-0 md:max-w-md">
          <div class="flex flex-wrap mb-1">
            <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
              <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
            </div>
            <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
          </div>
          <span class="text-xs text-coolGray-400 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>
    </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

Newsletter 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 #221

Get the code for 13,400+ components

Tailwind Component #222

Get the code for 13,400+ components

Tailwind Component #223

Get the code for 13,400+ components

Tailwind Component #224

Get the code for 13,400+ components

Tailwind Component #225

Get the code for 13,400+ components

Tailwind Component #226

Get the code for 13,400+ components

Tailwind Component #227

Get the code for 13,400+ components

Tailwind Component #228

Get the code for 13,400+ components

Tailwind Component #229

Get the code for 13,400+ components

Tailwind Component #230

Get the code for 13,400+ components

Tailwind Component #231

Get the code for 13,400+ components

Tailwind Component #232

Get the code for 13,400+ components

Tailwind Component #233

Get the code for 13,400+ components

Tailwind Component #234

Get the code for 13,400+ components

Tailwind Component #235

Get the code for 13,400+ components

Tailwind Component #236

Get the code for 13,400+ components

Tailwind Component #237

Get the code for 13,400+ components

Tailwind Component #238

Get the code for 13,400+ components

Tailwind Component #239

Get the code for 13,400+ components

Tailwind Component #240

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