Tailwind Components in Flex library

Framework

UI Library

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

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

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

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

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

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

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

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

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

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

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

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

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

Tailwind Component #54

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.

Tailwind Component #55

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.

Tailwind Component #56

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.

Tailwind Component #57

Tailwind CSS

Flex

<section class="py-16 md:py-24 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-16">
      <div class="w-full md:w-3/4 mb-8 md:mb-0">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Blog</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Blog posts</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full md:w-1/4"><a class="flex items-center justify-center py-2 px-4 ml-auto text-sm leading-5 text-green-50 font-medium bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 md:max-w-max rounded-md" href="#">View All Posts</a></div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-12 md:mb-24">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/room.jpg" alt="">
        </a>
        <p class="mb-2 text-coolGray-500 font-medium">John Doe &bull; 19 Jan 2022</p>
        <a class="inline-block mb-4 text-2xl leading-tight text-coolGray-800 hover:text-coolGray-900 font-bold hover:underline" href="#">A small business is only as good as its tools and it is totally true.</a><a class="inline-block py-1 px-3 text-xs leading-5 text-green-500 hover:text-green-600 font-medium uppercase bg-green-100 hover:bg-green-200 rounded-full shadow-sm" href="#">Technology</a>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/effect5.jpg" alt="">
        </a>
        <p class="mb-2 text-coolGray-500 font-medium">John Doe &bull; 19 Jan 2022</p>
        <a class="inline-block mb-4 text-2xl leading-tight text-coolGray-800 hover:text-coolGray-900 font-bold hover:underline" href="#">A small business is only as good as its tools and it is totally true.</a><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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #58

Tailwind CSS

Flex

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

Centered newsletter signup section with email input and subscribe button

A centered light section with a bold heading, subtitle, email input field, green Subscribe button, and privacy policy note. Decorative purple and blue dot grids frame the corners, and the form is arranged in a single horizontal row beneath the text.

Tailwind Component #59

Tailwind CSS

Flex

<section class="py-24 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 -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <div class="relative mx-auto md:ml-0 max-w-max">
          <img class="absolute z-10 -right-8 -top-8 w-28 md:w-auto" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
          <img class="absolute z-10 -left-10 -bottom-8 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
          <img src="flex-ui-assets/images/how-it-works/stock.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">How it works</span>
        <h2 class="mb-12 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h2>
        <div class="flex flex-wrap -mx-4 text-center md:text-left">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">1</div>
            <h3 class="mb-2 text-xl text-white font-bold">Custom analytics</h3>
            <p class="font-medium text-coolGray-400">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">2</div>
            <h3 class="mb-2 text-xl text-white font-bold">Team Management</h3>
            <p class="font-medium text-coolGray-400">Our calendar lets you know what is happening with customer and projects so you are able to control process.</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

Dark split-screen feature section with photo and numbered benefits

A dark marketing feature section with a rounded photo of a woman pointing at a wireframe whiteboard on the left, and a "How it works" eyebrow, large heading, and four numbered green-badge items with bold titles and gray descriptions on the right. Decorative yellow line-circle and blue dot-grid accents frame the image.

Tailwind Component #60

Tailwind CSS

Flex

<section class="py-20 xl:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center text-center -mx-4">
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 text-4xl md:text-5xl font-bold text-white tracking-tighter">235.000</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">$10m</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">APR</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">+50.000</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</p>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/4 px-4">
        <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">3.500</h2>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Stats Row with Four Large Metrics

A horizontal row of four centered statistics on a dark slate background, each showing a large bold white number above a smaller muted gray label. It is a marketing-style metrics section highlighting completed projects, APR, hours saved, and unique users.

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

Tailwind CSS 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

Ebook Product Card with Cover Image and Download Button

Tailwind Component #55

Get the code for 13,400+ components

Dark Cookie Consent Banner with Decline and Allow Buttons

Tailwind Component #56

Get the code for 13,400+ components

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

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Centered newsletter signup section with email input and subscribe button

Tailwind Component #59

Get the code for 13,400+ components

Dark split-screen feature section with photo and numbered benefits

Tailwind Component #60

Get the code for 13,400+ components

Dark Stats Row with Four Large Metrics

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support