Tailwind Components in Aurora 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

Aurora

<section class="relative bg-gray-50" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 left-0 w-full h-full" src="aurora-assets/headers/green-blur-bg-circle.png" alt="">
  <nav class="relative bg-white">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </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

Aurora marketing hero with asset dashboard preview

A landing page hero section for Aurora, a marketing asset management product, with a navigation bar, promotional announcement pill, large centered headline, subheading, and a green 'Request Access' call to action. Below the CTA, a device-style preview shows an asset library dashboard with search, view toggles, avatars, and image cards.

Hero section generator

Tailwind Component #2

Tailwind CSS

Aurora

<section class="relative bg-teal-900" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Aurora Marketing Asset Hero with Dashboard Preview

Dark green hero section for the Aurora marketing asset platform, featuring a navigation bar, promotional announcement pill, large centered headline, subtext, and a green Request Access call-to-action. Below the hero, a cropped app dashboard screenshot shows asset cards and search controls inside a device-like frame.

Hero section generator

Tailwind Component #3

Tailwind CSS

Aurora

<section class="relative bg-radial-dark-green" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #4

Tailwind CSS

Aurora

<section class="relative bg-gray-900" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #5

Tailwind CSS

Aurora

<section class="relative" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 left-0 w-full h-full" src="aurora-assets/headers/green-blur-bg-circle.png" alt="">
  <nav class="relative bg-white">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </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

Hero section generator

Tailwind Component #6

Tailwind CSS

Aurora

<section class="relative pb-24 bg-radial-dark-green" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #7

Tailwind CSS

Aurora

<section class="relative bg-gray-900 pb-12 md:pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #8

Tailwind CSS

Aurora

<section class="relative bg-gray-50 pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Features</a><a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Pricing</a><a class="inline-block hover:text-yellowGreen-700" href="#">Resources</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

Hero section generator

Tailwind Component #9

Tailwind CSS

Aurora

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-white">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Features</a><a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Pricing</a><a class="inline-block hover:text-yellowGreen-700" href="#">Resources</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

Hero section generator

Tailwind Component #10

Tailwind CSS

Aurora

<section class="relative bg-teal-900 pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-teal-900">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #11

Tailwind CSS

Aurora

<section class="relative pb-12 md:pb-64 overflow-hidden bg-radial-dark-green" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 right-0 mr-40" src="aurora-assets/headers/dots-background-light.png" alt="">
  <img class="absolute top-0 right-0" src="aurora-assets/headers/light-shadow-right.png" alt="">
  <nav class="relative bg-transparent mb-16">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex ml-12 items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #12

Tailwind CSS

Aurora

<section class="relative bg-teal-900 pb-12 md:pb-64 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 right-0 mr-40" src="aurora-assets/headers/dots-background-light.png" alt="">
  <img class="absolute top-0 right-0" src="aurora-assets/headers/light-shadow-right.png" alt="">
  <nav class="relative bg-transparent mb-16">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex ml-12 items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #13

Tailwind CSS

Aurora

<section class="relative pb-12 md:pb-64 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 right-0" src="aurora-assets/headers/header-3-light-top-right.png" alt="">
  <nav class="relative mb-16 bg-white">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block mr-12" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </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

Hero section generator

Tailwind Component #14

Tailwind CSS

Aurora

<section class="relative bg-gray-900 pb-12 md:pb-64 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 right-0 mr-40" src="aurora-assets/headers/dots-background-light.png" alt="">
  <img class="absolute top-0 right-0" src="aurora-assets/headers/light-shadow-right.png" alt="">
  <nav class="relative bg-transparent mb-16">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex ml-12 items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #15

Tailwind CSS

Aurora

<section class="relative pb-12 md:pb-24 lg:pb-64 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 right-0" src="aurora-assets/headers/header-3-light-top-right.png" alt="">
  <nav class="relative mb-16">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block mr-12" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex items-center">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </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

Hero section generator

Tailwind Component #16

Tailwind CSS

Aurora

<section class="bg-gray-50 pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="bg-white">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden ml-auto flex items-center justify-center h-10 w-10 bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex items-center ml-auto mr-12">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Features</a><a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Pricing</a><a class="inline-block hover:text-yellowGreen-700" href="#">Resources</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

Hero section generator

Tailwind Component #17

Tailwind CSS

Aurora

<section class="bg-teal-900 pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex ml-auto items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #18

Tailwind CSS

Aurora

<section class="bg-gray-900 pb-24" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex ml-auto items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #19

Tailwind CSS

Aurora

<section class="pb-24 bg-radial-dark-green" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo-white.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden flex items-center justify-center h-10 w-10 ml-auto border border-teal-900 bg-teal-200 bg-opacity-30 hover:bg-teal-700 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex ml-auto items-center">
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Features</a><a class="inline-block text-white hover:text-teal-400 mr-10" href="#">Pricing</a><a class="inline-block text-white hover:text-teal-400" href="#">Resources</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

Hero section generator

Tailwind Component #20

Tailwind CSS

Aurora

<section class="pb-12 md:pb-24" x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-10" src="aurora-assets/logos/aurora-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden ml-auto flex items-center justify-center h-10 w-10 bg-gradient-to-b from-cyanGreen-800 to-cyan-800 rounded-lg">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 19H21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="hidden lg:flex items-center ml-auto mr-12">
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">
            <div class="flex items-center">
              <span class="mr-3">Product</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
          <a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Features</a><a class="inline-block hover:text-yellowGreen-700 mr-10" href="#">Pricing</a><a class="inline-block hover:text-yellowGreen-700" href="#">Resources</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

Hero section generator

Tailwind Components by Shuffle

Browse 105 of ready-made components in Tailwind and Aurora 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 – Aurora Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Aurora marketing hero with asset dashboard preview

Tailwind Component #2

Get the code for 13,400+ components

Aurora Marketing Asset Hero with Dashboard Preview

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

Tailwind Component #12

Get the code for 13,400+ components

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Tailwind Component #16

Get the code for 13,400+ components

Tailwind Component #17

Get the code for 13,400+ components

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Tailwind Component #20

Get the code for 13,400+ components

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

UI Components

Company

Support