Tailwind Components in Vendia 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 #1

Tailwind CSS

Vendia

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6">
    <div class="flex justify-between items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500" href="#">Home</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Shop</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Product</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Blog</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-block text-white hover:text-blue-500" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" 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

Summer Collection Hero with Navigation Bar

A full-width hero section for an ecommerce site featuring a dark top navigation bar with logo, menu links, and cart icon, above a gradient yellow-to-blue background. It displays a large bold 'SUMMER COLLECTION' heading, supporting text, an 'Explore Collections' call-to-action link, and a cropped photo of a smiling woman in front of a white circle.

Hero section generator

Tailwind Component #2

Tailwind CSS

Vendia

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6">
    <div class="flex justify-between items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm text-yellow-500 font-medium" href="#">Home</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Shop</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Product</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Blog</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-block text-white hover:text-yellow-500" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" 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

Summer Collection Hero Banner with Model Image

A full-width hero section on a yellow-green background with a large bold headline 'SUMMER COLLECTION', short body text, and an 'Explore Collections' link beside a smiling model photo on a white circle. A black top navigation bar with the vendia logo, menu links, and cart icon sits above it.

Hero section generator

Tailwind Component #3

Tailwind CSS

Vendia

<section class="relative" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 left-0 w-full h-full" src="vendia-assets/images/header/bg-color-gradient.png" alt="">
  <nav class="relative px-6 py-6 z-20">
    <div class="flex w-full items-center">
      <a class="inline-block text-lg font-bold mr-24" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="ml-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 bg-white hover:bg-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 mr-auto">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Home</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Shop</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Product</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Blog</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-flex items-center justify-center rounded-full w-8 h-8 bg-white bg-gradient-to-br from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">

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

Tailwind CSS

Vendia

<section class="relative" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 left-0 w-full h-full" src="vendia-assets/images/header/bg-color-gradient.png" alt="">
  <nav class="relative px-6 py-6 z-20">
    <div class="flex w-full items-center">
      <a class="inline-block text-lg font-bold mr-24" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="ml-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 bg-white hover:bg-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 mr-auto">
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Home</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Shop</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Product</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Blog</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-flex items-center justify-center rounded-full w-8 h-8 bg-white hover:bg-yellow-500" href="#">

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

Tailwind CSS

Vendia

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-5 lg:px-16 py-10">
    <div class="flex flex-wrap justify-between items-center">
      <a class="inline-block py-2 text-lg font-bold" href="#">
        <img class="h-7" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="py-2">
        <a class="inline-flex items-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 hover:via-yellow-300" href="#">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 2.33333C1 1.59695 1.59695 1 2.33333 1H4.51949C4.80645 1 5.06121 1.18362 5.15195 1.45585L6.15049 4.45147C6.25541 4.76622 6.11292 5.11021 5.81618 5.25858L4.31134 6.011C5.04617 7.64081 6.35919 8.95383 7.989 9.68866L8.74142 8.18382C8.88979 7.88708 9.23378 7.74459 9.54853 7.84951L12.5442 8.84805C12.8164 8.93879 13 9.19355 13 9.48051V11.6667C13 12.403 12.403 13 11.6667 13H11C5.47715 13 1 8.52285 1 3V2.33333Z" stroke="url(#paint0_linear_2747_915)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <defs><linearGradient id="paint0_linear_2747_915" x1="1" y1="1" x2="15.4853" y2="7.01973" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFF25"><stop offset="0.21875" stop-color="#E7E542"><stop offset="0.453125" stop-color="#AAEA5E"><stop offset="0.697917" stop-color="#51D9C6"><stop offset="1" stop-color="#4AA8FF"></stop></stop></stop></stop></stop></linearGradient></defs>
          </svg>
          <span class="ml-3">Call us: +1-395-493-395</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="py-12 px-5 lg:px-16 border-t border-b border-blueGray-800 overflow-hidden">
    <div class="flex -mx-4 xl:-mx-8 animate-photo">
      <div class="flex-shrink-0 w-80 sm:w-2/3 md:w-1/3 xl:w-auto px-4 xl:px-8">
        <div class="group block w-full xl:w-88 relative">
          <div class="xs:hidden group-hover:block absolute bottom-0 left-0 w-full pb-6 px-8">
            <a class="block py-5 px-4 bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 hover:via-yellow-300 transition duration-200" href="#">
              <div class="flex flex-wrap items-center -mb-4">

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

Tailwind CSS

Vendia

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-5 lg:px-16 py-10">
    <div class="flex flex-wrap justify-between items-center">
      <a class="inline-block py-2 text-lg font-bold" href="#">
        <img class="h-7" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="py-2">
        <a class="inline-flex items-center text-yellow-500 hover:text-white font-medium" href="#">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 2.33333C1 1.59695 1.59695 1 2.33333 1H4.51949C4.80645 1 5.06121 1.18362 5.15195 1.45585L6.15049 4.45147C6.25541 4.76622 6.11292 5.11021 5.81618 5.25858L4.31134 6.011C5.04617 7.64081 6.35919 8.95383 7.989 9.68866L8.74142 8.18382C8.88979 7.88708 9.23378 7.74459 9.54853 7.84951L12.5442 8.84805C12.8164 8.93879 13 9.19355 13 9.48051V11.6667C13 12.403 12.403 13 11.6667 13H11C5.47715 13 1 8.52285 1 3V2.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ml-3">Call us: +1-395-493-395</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="py-12 px-5 lg:px-16 border-t border-b border-blueGray-800 overflow-hidden">
    <div class="flex -mx-4 xl:-mx-8 animate-photo">
      <div class="flex-shrink-0 w-80 sm:w-2/3 md:w-1/3 xl:w-auto px-4 xl:px-8">
        <div class="group block w-full xl:w-88 relative">
          <div class="hidden group-hover:block absolute bottom-0 left-0 w-full pb-6 px-8">
            <a class="block py-5 px-4 bg-yellow-500 hover:bg-white transition duration-200" href="#">
              <div class="flex flex-wrap items-center -mb-4">
                <div class="flex mb-4 items-center">

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

Tailwind CSS

Vendia

<section x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent" class="pb-12 md:pb-24 lg:pb-32 bg-black">
  <nav class="relative px-6 lg:px-16 py-9">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 ml-16 mr-auto">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Women</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Men</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Kids</a></li>
        <li class="group relative">
          <a class="inline-flex items-center text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">
            <span class="mr-3">Browse</span>
            <span class="text-white group-hover:text-blue-500">
              <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.6666 1L5.99998 5.66667L1.33331 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #8

Tailwind CSS

Vendia

<section x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent" class="pb-12 md:pb-24 lg:pb-32 bg-black">
  <nav class="relative px-6 lg:px-16 py-9">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 ml-16 mr-auto">
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Women</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Men</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Kids</a></li>
        <li class="group relative">
          <a class="inline-flex items-center text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">
            <span class="mr-3">Browse</span>
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6666 1L5.99998 5.66667L1.33331 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #9

Tailwind CSS

Vendia

<section class="bg-blueGray-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 bg-black">
    <div class="flex items-center">
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">House</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Office</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Brand</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Stores</a></li>
      </ul>
      <a class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-block text-lg font-bold" href="#">
        <img class="h-5" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex items-center ml-auto">
        <a class="inline-block mr-8 font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Help</a>
        <a class="group inline-flex items-center text-sm font-bold" href="#">
          <span class="text-gray-400 group-hover:text-blue-500">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #10

Tailwind CSS

Vendia

<section class="bg-blueGray-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 bg-black">
    <div class="flex items-center">
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">House</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Office</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Brand</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Stores</a></li>
      </ul>
      <a class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-block text-lg font-bold" href="#">
        <img class="h-5" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex items-center ml-auto">
        <a class="inline-block mr-8 font-medium text-white hover:text-yellow-500" href="#">Help</a>
        <a class="group inline-flex items-center text-sm font-bold" href="#">
          <span class="text-gray-400 group-hover:text-yellow-500">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #11

Tailwind CSS

Vendia

<section x-data="{ cart: true }" :class="{ 'hidden': !cart }" class="relative z-50">
  <div class="absolute top-0 left-0 w-full sm:py-12 md:py-24">
    <div class="max-w-lg pt-6 pb-8 px-8 mx-auto bg-blueGray-900">
      <div class="flex mb-10 items-center justify-between">
        <h6 class="font-bold text-xl text-white mb-0">Shopping Cart</h6>
        <button x-on:click="cart = false" class="inline-block text-gray-400 hover:text-gray-200">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 11L11 1M1 1L11 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div x-data="{ item: true }" :class="{ 'hidden': !item }" class="flex flex-wrap -mx-2 pb-6 border-b border-blueGray-800">
        <div class="w-1/4 px-2">
          <img class="block h-full" src="vendia-assets/images/cart-popup/item1.png" alt="">
        </div>
        <div class="w-2/4 px-2">
          <div class="flex flex-col h-full">
            <h6 class="font-bold text-white mb-1">Zip Tote Basket</h6>
            <span class="block pb-4 mb-auto font-medium text-gray-400">White and black</span>
            <select class="w-14 text-sm pl-2 text-white bg-blueGray-900 outline-none" name="" id="">
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
            </select>

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 Shopping Cart Modal with Product Line Items and Checkout Summary

A dark overlay dialog titled Shopping Cart with a close control, listing three identical Zip Tote Basket line items with thumbnails, quantity selectors, remove links, and prices. A summary panel shows subtotal, shipping, tax, order total, and a bright yellow Continue to Payment button.

E-commerce (orders) generator

Tailwind Component #12

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <h3 class="font-heading text-4xl sm:text-5xl font-bold text-white mb-5">Grab 30% Off Today</h3>
      <p class="text-gray-400 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="flex flex-col sm:flex-row flex-wrap sm:items-center sm:justify-center"><a class="inline-block px-7 py-4 mb-3 sm:mb-0 sm:mr-4 text-center font-bold bg-yellow-500 hover:bg-yellow-600 transition duration-200" href="#">Shop &amp; Save Now</a><a class="inline-block px-7 py-4 text-center text-white font-bold bg-gray-900 hover:bg-gray-800 transition duration-200" href="#">Explore All</a></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 Promotional Hero with 30% Off Heading and Two CTA Buttons

A centered, full-width promotional hero on a black background with a large white heading, short supporting paragraph, and two buttons: a bright yellow-green primary button and a dark secondary button. It promotes a discount offer with a clear call to action.

Call to action generator

Tailwind Component #13

Tailwind CSS

Vendia

<section x-data="{ active: 1 }" class="py-12 bg-black">
  <div class="container mx-auto px-4">
    <nav>
      <ul class="flex items-center justify-center">
        <li class="mr-5"><a x-ref="page1" x-on:click.prevent="active = $refs.page1.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page1.textContent == active, 'text-white hover:text-black hover:bg-yellow-300': $refs.page1.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500 font-bold" href="#">1</a></li>
        <li class="mr-5"><a x-ref="page2" x-on:click.prevent="active = $refs.page2.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page2.textContent == active, 'text-white': $refs.page2.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">2</a></li>
        <li class="mr-5"><a x-ref="page3" x-on:click.prevent="active = $refs.page3.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page3.textContent == active, 'text-white': $refs.page3.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">3</a></li>
        <li class="mr-5"><a x-ref="page4" x-on:click.prevent="active = $refs.page4.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page4.textContent == active, 'text-white': $refs.page4.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">4</a></li>
        <li><a x-ref="page5" x-on:click.prevent="active = $refs.page5.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page5.textContent == active, 'text-white': $refs.page5.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">5</a></li>
      </ul>
    </nav>
  </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 Pagination Control with Gradient Active Page

A horizontal pagination bar on a black background showing page numbers 1 through 5, with the active page 1 highlighted by a green-to-blue gradient square. The control is centered and minimal, with no other visible elements.

Pagination generator

Tailwind Component #14

Tailwind CSS

Vendia

<section class="py-12 md:py-24 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-sm md:max-w-xl mx-auto lg:max-w-none">
      <div class="mb-16">
        <span class="text-sm font-bold text-yellow-500">Trending</span>
        <h1 class="font-heading text-4xl text-white font-bold mt-6 mb-2">The best of the best</h1>
        <p class="text-sm text-gray-400">The coolest, hottest furniture pieces.</p>
      </div>
      <div class="flex flex-wrap -mb-8 -mx-4 xl:-mx-8">
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products4.png" alt="">
            <span class="text-xs font-bold text-yellow-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products3.png" alt="">
            <span class="text-xs font-bold text-yellow-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Trending product grid with four apparel items on black background

A dark-themed product listing section headed by a 'Trending' label and 'The best of the best' heading, showing four product cards in a horizontal row. Each card displays a product photo on a white background, a price in a lime accent, and a product name.

E-commerce (products) generator

Tailwind Component #15

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <h3 class="font-heading text-4xl sm:text-5xl font-bold text-white mb-5">Grab 30% Off Today</h3>
      <p class="text-gray-400 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="flex flex-col sm:flex-row flex-wrap sm:items-center sm:justify-center">
        <a class="relative group inline-block h-14 w-full sm:w-auto mb-3 sm:mb-0 sm:mr-4 px-7 py-4 text-center font-bold text-black transition duration-200 overflow-hidden" href="#">
          <div class="absolute top-0 left-0 w-full h-24 transform -translate-y-8 group-hover:-translate-y-1 transition duration-500 bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500"></div>
          <span class="relative">Shop &amp; Save Now</span>
        </a>
        <a class="inline-block h-14 px-7 py-4 text-center text-white font-bold bg-gray-900 hover:bg-gray-800 transition duration-200" href="#">Explore All</a>
      </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 Centered Promotional Hero with Gradient CTA

A centered promotional hero section on a black background with a large heading offering 30% off, short supporting text, and two call-to-action buttons: a gradient primary button and a dark secondary button. The layout is a simple vertically stacked block with no imagery.

Call to action generator

Tailwind Component #16

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <h3 class="font-heading text-3xl font-bold text-white mb-8">Recent reviews</h3>
    <div class="flex flex-wrap -mx-4 -mb-12 py-10 border-t border-gray-900">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
        <div>
          <h6 class="text-white font-bold">Risako M</h6>
          <span class="text-sm text-gray-400">May 16, 2021</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
        <div class="flex items-center md:justify-end lg:justify-start">
          <div class="flex items-center">
            <svg width="116" height="23" viewBox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#FFBB29"></path>
              <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#FFBB29"></path>
              <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#FFBB29"></path>
              <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#FFBB29"></path>
              <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#FFBB29"></path>
            </svg>
          </div>
          <span class="ml-3 text-white font-bold">5</span>
        </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 Recent Reviews List with Star Ratings

A dark-background list titled Recent reviews showing three customer reviews, each with reviewer name, date, star rating with numeric score, review headline, and body text. Rows are separated by thin horizontal dividers in a three-column arrangement.

Reviews generator

Tailwind Component #17

Tailwind CSS

Vendia

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-20 bg-black">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-4/12 xl:w-3/12 px-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-1 gap-6 md:gap-2 lg:gap-6 px-4 lg:pt-28 pb-20 lg:pb-9">
          <div>
            <span class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 mb-5">Average Rating</span>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-5.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox" checked="">
              <img src="vendia-assets/images/search/star-light-4.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-3.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-2.svg" alt="">
            </div>
            <div class="flex items-center">

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 Product Listing Grid with Filter Sidebar and Pagination

A dark-themed ecommerce product listing with sort, category, and size dropdowns above a 3-column grid of product cards showing price, title, star ratings, and review counts. A left sidebar provides checkbox filters for average rating, category, brand, and free shipping, with numbered pagination below.

E-commerce (products) generator

Tailwind Component #18

Tailwind CSS

Vendia

<section class="py-12 md:pt-20 md:pb-32 bg-black">
  <div class="container mx-auto px-4">
    <h1 class="text-center font-heading text-4xl text-white font-bold mb-16">Shop by category</h1>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4">
        <a class="group block text-center" href="#">
          <img class="block mb-5 w-full h-40 object-cover" src="vendia-assets/images/category/category-item1.png" alt="">
          <span class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 group-hover:via-yellow-300">Trendy Fashion</span>
        </a>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4">
        <a class="group block text-center" href="#">
          <img class="block mb-5 w-full h-40 object-cover" src="vendia-assets/images/category/category-item5.png" alt="">
          <span class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 group-hover:via-yellow-300">Winter Collection</span>
        </a>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 hidden md:block">
        <a class="group block text-center" href="#">
          <img class="block mb-5 w-full h-40 object-cover" src="vendia-assets/images/category/category-item2.png" alt="">
          <span class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 group-hover:via-yellow-300">Beauty</span>
        </a>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 hidden lg:block">
        <a class="group block text-center" href="#">

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

E-commerce (products) generator

Tailwind Component #19

Tailwind CSS

Vendia

<section x-data="{ cart: true }" :class="{ 'hidden': !cart }" class="relative z-50">
  <div class="absolute top-0 left-0 w-full sm:py-12 md:py-24">
    <div class="max-w-lg pt-6 pb-8 px-8 mx-auto bg-blueGray-900">
      <div class="flex mb-10 items-center justify-between">
        <h6 class="font-bold text-xl text-white mb-0">Shopping Cart</h6>
        <button x-on:click="cart = false" class="inline-block text-gray-400 hover:text-gray-200">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 11L11 1M1 1L11 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div x-data="{ item: true }" :class="{ 'hidden': !item }" class="flex flex-wrap -mx-2 pb-6 border-b border-blueGray-800">
        <div class="w-1/4 px-2">
          <img class="block h-full" src="vendia-assets/images/cart-popup/item1.png" alt="">
        </div>
        <div class="w-2/4 px-2">
          <div class="flex flex-col h-full">
            <h6 class="font-bold text-white mb-1">Zip Tote Basket</h6>
            <span class="block pb-4 mb-auto font-medium text-gray-400">White and black</span>
            <select class="w-14 text-sm pl-2 text-white bg-blueGray-900 outline-none" name="" id="">
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
            </select>

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 Shopping Cart Modal with Line Items and Order Summary

A dark overlay dialog titled Shopping Cart listing three Zip Tote Basket line items with product thumbnails, quantity selectors, prices, and remove links, followed by a subtotal, shipping, tax, and order total summary with a gradient Continue to Payment button.

E-commerce (orders) generator

Tailwind Component #20

Tailwind CSS

Vendia

<section class="py-20 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row flex-wrap items-center justify-center">
      <div class="flex items-center">
        <div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500 text-sm font-bold">1</div>
        <span class="font-bold text-white">Shopping Cart</span>
      </div>
      <span class="my-4 md:my-0 md:mx-8 lg:mx-16">
        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class="flex items-center">
        <div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">2</div>
        <span class="font-bold text-white">Payment &amp; Delivery Options</span>
      </div>
      <span class="my-4 md:my-0 md:mx-8 lg:mx-16">
        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class="flex items-center">
        <div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">3</div>
        <span class="font-bold text-white">Order Received</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Three-Step Checkout Progress Indicator

A horizontal checkout progress indicator on a black background showing three numbered steps: Shopping Cart, Payment & Delivery Options, and Order Received. The first step is highlighted with a green-to-blue gradient badge, while the remaining steps use dark gray badges, and arrows connect the steps.

Steps generator

Tailwind Components by Shuffle

Browse 105 of ready-made components in Tailwind and Vendia library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

Try for Free →

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 – Vendia Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Summer Collection Hero with Navigation Bar

Tailwind Component #2

Get the code for 13,400+ components

Summer Collection Hero Banner with Model Image

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Tailwind Component #10

Get the code for 13,400+ components

Tailwind Component #11

Get the code for 13,400+ components

Dark Shopping Cart Modal with Product Line Items and Checkout Summary

Tailwind Component #12

Get the code for 13,400+ components

Dark Promotional Hero with 30% Off Heading and Two CTA Buttons

Tailwind Component #13

Get the code for 13,400+ components

Dark Pagination Control with Gradient Active Page

Tailwind Component #14

Get the code for 13,400+ components

Trending product grid with four apparel items on black background

Tailwind Component #15

Get the code for 13,400+ components

Dark Centered Promotional Hero with Gradient CTA

Tailwind Component #16

Get the code for 13,400+ components

Dark Recent Reviews List with Star Ratings

Tailwind Component #17

Get the code for 13,400+ components

Dark Product Listing Grid with Filter Sidebar and Pagination

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Dark Shopping Cart Modal with Line Items and Order Summary

Tailwind Component #20

Get the code for 13,400+ components

Three-Step Checkout Progress Indicator

Tailwind Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions