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

Tailwind CSS

Flex

<section class="relative bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div x-data="{ mobileNavOpen: false }" class="bg-transparent">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center 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-50" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #42

Tailwind CSS

Flex

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-900">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center 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-800" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #43

Tailwind CSS

Flex

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #44

Tailwind CSS

Flex

<section class="relative overflow-hidden">
  <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 x-data="{ mobileNavOpen: false }" class="relative bg-white opacity-90 overflow-hidden">
    <div class="bg-transparent">
      <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
          <div class="w-1/2 xl:w-1/3">
            <a class="block max-w-max" href="#">
              <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
            </a>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <ul class="hidden xl:flex xl:justify-center">
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
              <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #45

Tailwind CSS

Flex

<section class="relative bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: top;">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #46

Tailwind CSS

Flex

<section class="relative overflow-hidden">
  <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 class="relative bg-coolGray-900 opacity-90 overflow-hidden">
    <div x-data="{ mobileNavOpen: false }" class="bg-transparent">
      <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
          <div class="w-1/2 xl:w-1/3">
            <a class="block max-w-max" href="#">
              <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
            </a>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <ul class="hidden xl:flex xl:justify-center">
              <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
              <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
              <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
              <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #47

Tailwind CSS

Flex

<section class="relative overflow-hidden">
  <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 class="relative bg-white opacity-90 overflow-hidden">
    <div x-data="{ mobileNavOpen: false }" class="bg-transparent">
      <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
          <div class="w-1/2 xl:w-1/3">
            <a class="block max-w-max" href="#">
              <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
            </a>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <ul class="hidden xl:flex xl:justify-center">
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
              <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #48

Tailwind CSS

Flex

<section class="relative overflow-hidden">
  <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 class="relative bg-coolGray-900 opacity-90 overflow-hidden">
    <div x-data="{ mobileNavOpen: false }" class="bg-transparent">
      <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
          <div class="w-1/2 xl:w-1/3">
            <a class="block max-w-max" href="#">
              <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
            </a>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <ul class="hidden xl:flex xl:justify-center">
              <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
              <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
              <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
              <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #49

Tailwind CSS

Flex

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #50

Tailwind CSS

Flex

<section x-data="{ mobileNavOpen: false }" class="relative overflow-hidden">
  <div>
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center 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-50" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #51

Tailwind CSS

Flex

<section class="overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="relative bg-coolGray-50 overflow-hidden">
    <div class="bg-coolGray-50">
      <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
          <div class="w-1/2 xl:w-1/3">
            <a class="block max-w-max" href="#">
              <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
            </a>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <ul class="hidden xl:flex xl:justify-center">
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
              <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
              <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="w-1/2 xl:w-1/3">
            <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
          </div>
        </div>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
          <svg width="35" height="35" viewbox="0 0 32 32" 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

Hero section generator

Tailwind Component #52

Tailwind CSS

Flex

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #53

Tailwind CSS

Flex

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-50">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-500 hover:text-coolGray-900 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>

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

Hero section generator

Tailwind Component #54

Tailwind CSS

Flex

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-repeat: no-repeat; background-position: left top;">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-5xl mx-auto mb-8 md: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-full shadow-sm">Blog</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</h3>
      <p class="mb-10 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 class="relative mx-auto md:w-80">
        <img class="absolute top-1/2 left-4 transform -translate-y-1/2" src="flex-ui-assets/elements/blog/search.svg" alt="">
        <input class="w-full py-3 pl-12 pr-4 text-coolGray-900 leading-tight placeholder-coolGray-500 border border-coolGray-200 rounded-lg shadow-xsm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="text" placeholder="Search">
      </div>
    </div>
    <ul class="flex flex-wrap mb-8 -mx-2 text-center">
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">All Categories</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Technology</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Development</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 mb-4 md:mb-0 text-sm text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Marketing</a></li>
      <li class="w-full md:w-auto px-2"><a class="inline-block w-full py-2 px-4 text-sm text-coolGray-400 hover:text-green-500 hover:bg-green-200 font-bold rounded-md hover:shadow-sm" href="#">Start-up</a></li>
    </ul>
    <div class="flex flex-wrap -mx-4 mb-12 md:mb-20">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/effect.jpg" alt="">
        </a>
        <div class="mb-4"><a class="inline-block py-1 px-3 text-xs leading-5 text-green-500 hover:text-green-600 font-medium uppercase bg-green-100 hover:bg-green-200 rounded-full shadow-sm" href="#">Technology</a></div>

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

Blog Landing Page with Search, Category Filters, and Article Card Grid

A blog index section with a centered heading, subtitle, search input, and category tabs above a two-column grid of article cards, each showing an image, category badge, author and date, title, excerpt, and a Read Post link. A View more button sits below the grid.

Blog generator

Tailwind Component #55

Tailwind CSS

Flex

<section class="overflow-hidden">
  <div>
    <div class="px-8 py-6 xl:py-0 bg-white border-b border-coolGray-100">
      <div class="flex items-center justify-between -m-2">
        <div class="flex flex-wrap items-center w-auto p-2">
          <a class="block max-w-max xl:mr-14" href="#">
            <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
          </a>
          <ul class="hidden xl:flex flex-wrap">
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Dashboard</p>
              </a>
            </li>
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.50003 8.86L11.5 14.06C11.6521 14.1478 11.8245 14.194 12 14.194C12.1756 14.194 12.348 14.1478 12.5 14.06L21.5 8.86C21.6512 8.77275 21.7768 8.64746 21.8646 8.49659C21.9523 8.34572 21.999 8.17452 22 8C22.0007 7.82379 21.9549 7.65053 21.8671 7.49775C21.7792 7.34497 21.6526 7.21811 21.5 7.13L12.5 1.94C12.348 1.85224 12.1756 1.80603 12 1.80603C11.8245 1.80603 11.6521 1.85224 11.5 1.94L2.50003 7.13C2.34743 7.21811 2.22081 7.34497 2.13301 7.49775C2.04521 7.65053 1.99933 7.82379 2.00003 8C2.00108 8.17452 2.04779 8.34572 2.13551 8.49659C2.22322 8.64746 2.34889 8.77275 2.50003 8.86ZM12 4L19 8L12 12L5.00003 8L12 4ZM20.5 11.17L12 16L3.50003 11.13C3.3859 11.0639 3.25981 11.021 3.12903 11.0038C2.99825 10.9866 2.86537 10.9955 2.73803 11.0299C2.61069 11.0643 2.49141 11.1235 2.38706 11.2042C2.28271 11.2849 2.19536 11.3854 2.13003 11.5C1.99966 11.7296 1.96539 12.0015 2.03471 12.2563C2.10403 12.5111 2.2713 12.7281 2.50003 12.86L11.5 18.06C11.6521 18.1478 11.8245 18.194 12 18.194C12.1756 18.194 12.348 18.1478 12.5 18.06L21.5 12.86C21.7288 12.7281 21.896 12.5111 21.9654 12.2563C22.0347 12.0015 22.0004 11.7296 21.87 11.5C21.8047 11.3854 21.7173 11.2849 21.613 11.2042C21.5087 11.1235 21.3894 11.0643 21.262 11.0299C21.1347 10.9955 21.0018 10.9866 20.871 11.0038C20.7402 11.021 20.6142 11.0639 20.5 11.13V11.17ZM20.5 15.17L12 20L3.50003 15.13C3.3859 15.0639 3.25981 15.021 3.12903 15.0038C2.99825 14.9866 2.86537 14.9955 2.73803 15.0299C2.61069 15.0643 2.49141 15.1235 2.38706 15.2042C2.28271 15.2849 2.19536 15.3854 2.13003 15.5C1.99966 15.7296 1.96539 16.0015 2.03471 16.2563C2.10403 16.5111 2.2713 16.7281 2.50003 16.86L11.5 22.06C11.6521 22.1478 11.8245 22.194 12 22.194C12.1756 22.194 12.348 22.1478 12.5 22.06L21.5 16.86C21.7288 16.7281 21.896 16.5111 21.9654 16.2563C22.0347 16.0015 22.0004 15.7296 21.87 15.5C21.8047 15.3854 21.7173 15.2849 21.613 15.2042C21.5087 15.1235 21.3894 15.0643 21.262 15.0299C21.1347 14.9955 21.0018 14.9866 20.871 15.0038C20.7402 15.021 20.6142 15.0639 20.5 15.13V15.17Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Projects</p>
              </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

Flex App Top Navigation Bar with Dashboard, Projects, Tasks, and Profile

A horizontal top navigation bar with the Flex logo, icon-labeled links for Dashboard, Projects, Tasks, and Products, and right-aligned mail and notification icons plus a user avatar with name and email. It is a single-row header with a light background and a thin bottom divider.

Navigation (horizontal) generator

Tailwind Component #56

Tailwind CSS

Flex

<div class="fixed top-0 left-0 w-full h-full px-4 py-16 md:py-40 bg-coolGray-900 bg-opacity-50 overflow-y-auto z-50">
  <div class="max-w-3xl mx-auto bg-coolGray-50 rounded-lg overflow-hidden">
    <div class="relative">
      <img class="h-40 md:h-auto w-full object-cover" src="flex-ui-assets/images/modals/photo-modal1.png" alt="">
      <div class="absolute bottom-0 left-1/2 mb-6 transform -translate-x-1/2"><a class="inline-block w-3 h-3 mr-3 bg-coolGray-100 rounded-full" href="#"></a><a class="inline-block w-3 h-3 mr-3 bg-green-500 rounded-full" href="#"></a><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></div>
      <a class="absolute top-0 md:top-auto md:bottom-0 right-0 inline-block py-2 px-4 mt-6 mr-6 mb-6 text-sm text-green-50 font-medium leading-5 bg-yellow-500 hover:bg-yellow-600 focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 rounded-md" href="#">For free</a>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full md:w-4/6 border-b md:border-b-0 md:border-r border-coolGray-100">
        <div class="py-10 pl-10 pr-8">
          <h3 class="mb-2 text-xl font-semibold text-coolGray-800 leading-7">Milk and honey</h3>
          <p class="mb-4 text-sm text-coolGray-500 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
          <a class="inline-flex items-center text-green-500 hover:text-green-600 font-medium" href="#">
            <span class="mr-2">Learn More</span>
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86346 13.92 9.62C13.8724 9.49725 13.801 9.3851 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.4783 8.99591 6.7337 8.99591 7C8.99591 7.2663 9.1017 7.5217 9.29 7.71L10.59 9L7 9C6.73479 9 6.48043 9.10536 6.2929 9.29289C6.10536 9.48043 6 9.73478 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11L10.59 11L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51808 13.8268 0.761204C11.9996 0.00432792 9.98891 -0.193706 8.0491 0.192146C6.10929 0.577999 4.32746 1.53041 2.92894 2.92893C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433294 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C17.9997 16.1425 18.7363 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10ZM2 10C2 8.41775 2.4692 6.87103 3.34825 5.55544C4.2273 4.23985 5.47673 3.21446 6.93854 2.60896C8.40035 2.00346 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full md:w-2/6 pt-6 pb-10 px-8">
        <div>
          <div class="mb-10">
            <div class="flex mb-3 items-center justify-between">

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

Ebook Product Card with Cover Image and Download Button

A single contained card showcasing a free digital book titled Milk and honey, with a cover image carousel indicator, metadata for size, page count, and last update, a Learn More link, and a green Download PDF button. The split footer separates descriptive text from file details.

Modals generator

Tailwind Component #57

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 md:pb-32 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-4xl mb-12 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">Features</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <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 every aspect of your business in one secure platform.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg: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-6 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-4 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>

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

Feature Grid with Green Icon Tiles for CRM Capabilities

A marketing feature section with a small FEATURES badge, a centered two-line heading, and supporting text above a 3x2 grid of features. Each feature has a green rounded icon tile, a bold title, and short centered description text on a light background.

Features generator

Tailwind Component #58

Tailwind CSS

Flex

<section class="py-20 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/3 px-4 mb-12 md:mb-0">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-18 h-18 bg-green-500 rounded-full">
            <svg class="h-8 text-white" width="32" height="32" 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-900 font-bold">Email</h3>
          <p class="mb-4 text-lg md:text-xl font-medium text-coolGray-500 leading-7">Lorem ipsum dolor sit amet</p>
          <a class="text-lg md:text-xl text-green-500 hover:text-green-600 font-medium" href="mailto:#">contact@flex.co</a>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4 mb-12 md:mb-0">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-18 h-18 bg-green-500 rounded-full">
            <svg class="h-8 text-white" width="32" height="32" 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>
            </svg>
          </div>
          <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-900 font-bold">Phone</h3>
          <p class="mb-4 text-lg md:text-xl font-medium text-coolGray-500 leading-7">Lorem ipsum dolor sit amet</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

Three-Column Contact Information Section with Green Icons

A horizontal row of three centered contact items (Email, Phone, Office), each with a green circular icon, bold heading, gray supporting text, and green contact details on a light background with a faint grid texture. It presents contact channels in a simple informational layout without form inputs or buttons.

Contact generator

Tailwind Component #59

Tailwind CSS

Flex

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 mx-auto w-full bg-coolGray-900 max-w-6xl border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <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>
</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

Dark Cookie Consent Banner with Decline and Allow Buttons

A full-width dark banner displaying a third-party cookie notice with a policy link on the left and Decline and Allow buttons on the right. The horizontal layout places the message, link, and actions in one row for quick user consent.

Cookies generator

Tailwind Component #60

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="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 xl:pt-24 xl:pb-28 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
      <h3 class="mb-4 text-3xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">Pricing that scales with your business immediately.</p>
      <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 items-center pt-10 px-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
            <span class="inline-block py-px px-2 mb-6 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
            <h3 class="mb-4 text-lg md:text-xl text-green-500 font-medium">Basic Plan</h3>
            <div class="mb-4">
              <span class="relative -top-6 right-1 text-2xl text-coolGray-900 font-medium">$</span>
              <span class="text-5xl text-coolGray-900 font-medium">10</span>
              <span class="text-3xl text-coolGray-900 font-medium">/mo</span>
            </div>
            <p class="mb-7 text-lg md:text-xl text-coolGray-400 font-medium">Billed annually</p>
            <ul class="self-start mb-8">
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">

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 Section with Three Plan Cards

A pricing section with a heading and subtitle above three side-by-side white plan cards comparing Basic, Freelancer, and Enterprise subscriptions. Each card lists prices, a billing note, feature checkmarks, and a green Request a Demo button.

Pricing 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 #41

Get the code for 13,400+ components

Tailwind Component #42

Get the code for 13,400+ components

Tailwind Component #43

Get the code for 13,400+ components

Tailwind Component #44

Get the code for 13,400+ components

Tailwind Component #45

Get the code for 13,400+ components

Tailwind Component #46

Get the code for 13,400+ components

Tailwind Component #47

Get the code for 13,400+ components

Tailwind Component #48

Get the code for 13,400+ components

Tailwind Component #49

Get the code for 13,400+ components

Tailwind Component #50

Get the code for 13,400+ components

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Blog Landing Page with Search, Category Filters, and Article Card Grid

Tailwind Component #55

Get the code for 13,400+ components

Flex App Top Navigation Bar with Dashboard, Projects, Tasks, and Profile

Tailwind Component #56

Get the code for 13,400+ components

Ebook Product Card with Cover Image and Download Button

Tailwind Component #57

Get the code for 13,400+ components

Feature Grid with Green Icon Tiles for CRM Capabilities

Tailwind Component #58

Get the code for 13,400+ components

Three-Column Contact Information Section with Green Icons

Tailwind Component #59

Get the code for 13,400+ components

Dark Cookie Consent Banner with Decline and Allow Buttons

Tailwind Component #60

Get the code for 13,400+ components

Pricing Section with Three Plan Cards

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