Search Components

All Components

Browse all available Tailwind CSS components

Sidebar Navigation Component

A complex, responsive sidebar navigation component with a triadic color scheme and gradient transitions, designed for a dashboard interface. Includes dark mode support and multiple interactive elements.

Open Preview

                <div class="flex h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-500">

  <!-- Sidebar -->
  <div class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 shadow-xl transform transition-transform duration-300 md:relative md:translate-x-0 overflow-y-auto z-40"
       x-data="{ open: false }"
       @keydown.escape.window="open = false"
       :class="{'translate-x-0 ease-out': open, '-translate-x-full ease-in': !open}">

    <!-- Sidebar Header -->
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
      <a href="#" class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <span class="text-2xl font-bold tracking-wider">Dashboard</span>
      </a>
      <button class="md:hidden focus:outline-none" @click="open = false">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Sidebar Navigation Links -->
    <nav class="mt-6">
      <ul>
        <li class="relative px-6 py-3">
          <span class="absolute inset-y-0 left-0 w-1 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out text-blue-600 dark:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6-4h4" />
            </svg>
            <span>Overview</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            <span>Analytics</span>
          </a>
        </li>

        <li class="relative px-6 py-3" x-data="{ open: false }">
          <button @click="open = !open" class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
            <span class="inline-flex items-center">
              <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1.414M14 9l2 2m0 0l2-2m-2-2v4m-6 3H6m6 0h.01M6 15h2m-2 2h2m0 0h.01M10 20v-6a2 2 0 012-2h.01M12 9l2-2m0 0l2 2m-2-2v4m-3 10V6a2 2 0 012-2h2a2 2 0 012 2v14M8 5a2 2 0 012-2h2a2 2 0 012 2v14" />
              </svg>
              <span>Reports</span>
            </span>
            <svg class="h-4 w-4 transform transition-transform duration-200" :class="{'rotate-90': open}" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <ul x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner">
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Daily Reports</a>
            </li>
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Weekly Reports</a>
            </li>
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Monthly Reports</a>
            </li>
          </ul>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354l.707-.707A4 4 0 0117 4.5v16.146a.5.5 0 01-.854.354L12 18.5l-4.146 2.5A.5.5 0 017 20.646V4.5a4 4 0 013.293-3.854L12 4.354z" />
            </svg>
            <span>Projects</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2V7a4 4 0 00-4-4H7a4 4 0 00-4 4v10a2 2 0 002 2h4m3 0l-3 3v-3m0 0h8m-10 6L9 14l5-5 5 5" />
            </svg>
            <span>Tasks</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            <span>Users</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Sidebar Footer (User Info) -->
    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full object-cover ring-2 ring-blue-500 dark:ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
          </div>
        </div>
        <button class="p-2 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md transition-colors duration-200 hover:text-red-600 dark:hover:text-red-400">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
          </svg>
        </button>
      </div>
    </div>

  </div>

  <!-- Overlay for mobile when sidebar is open -->
  <div class="fixed inset-0 bg-black opacity-50 z-30 md:hidden" x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-50" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-50" x-transition:leave-end="opacity-0" @click="open = false"></div>

  <!-- Main Content Area -->
  <div class="flex-1 flex flex-col overflow-hidden">

    <!-- Top Bar / Navbar -->
    <header class="flex justify-between items-center px-6 py-4 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 z-20">
      <div class="flex items-center">
        <button class="md:hidden text-gray-500 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100 dark:text-gray-400" @click="open = true">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <h1 class="ml-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">Overview</h1>
      </div>

      <div class="flex items-center space-x-4">
        <!-- Search Bar -->
        <div class="relative hidden md:block">
          <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <input class="block w-full rounded-md border-gray-300 pl-10 pr-4 py-2 text-gray-900 placeholder-gray-500 ring-1 ring-gray-300 dark:ring-gray-600 focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-gray-100 dark:bg-gray-700 dark:text-gray-100" placeholder="Search..." type="search">
        </div>

        <!-- Settings Dropdown -->
        <div class="relative" x-data="{ open: false }">
          <button @click="open = !open" class="flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:text-gray-900 transition-colors duration-200">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </button>
          <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md shadow-lg py-1 z-50">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Logout</a>
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.288a1 1 0 00.757 1.637l.95-.316A1 1 0 0018 15v-1a1 1 0 00-.757-.966l-.95-.316a1 1 0 00-.671 1.344zM16 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm-4.288 4.459a1 1 0 00-1.637.757l-.316.95A1 1 0 0010 18h1a1 1 0 00.966-.757l.316-.95a1 1 0 00-1.344-.671zM10.5 16a.5.5 0 01-.5.5v1a.5.5 0 011 0v-1a.5.5 0 01-.5-.5zM5.712 14.459a1 1 0 00-.757-1.637l-.95.316A1 1 0 002 15v1a1 1 0 00.757.966l.95.316a1 1 0 00.671-1.344zM4 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM5.712 5.541a1 1 0 00.757-1.637l.95.316A1 1 0 008 3V2a1 1 0 00-.757-.966l-.95-.316A1 1 0 005.712 5.541zM10.5 4a.5.5 0 01-.5.5v1a.5.5 0 011 0V4a.5.5 0 01-.5-.5zm4.288 5.541a1 1 0 00-1.637-.757l-.316-.95A1 1 0 0010 2h-1a1 1 0 00-.966.757l-.316.95a1 1 0 001.344.671z"></path></svg>
        </button>

      </div>
    </header>

    <!-- Main Content Body (Placeholder) -->
    <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 dark:bg-gray-900 p-6">
      <div class="container mx-auto">
        <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Welcome to your Dashboard!</h2>
        <p class="text-gray-700 dark:text-gray-300">This is a placeholder for your dashboard content. You can add charts, data tables, and other widgets here.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          <!-- Card 1 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Total Sales</h3>
              <div class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Monthly</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
            <p class="text-sm text-green-600 dark:text-green-400"><svg class="inline-block w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 5.2% since last month</p>
          </div>

          <!-- Card 2 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Users</h3>
              <div class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Weekly</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">875</p>
            <p class="text-sm text-red-600 dark:text-red-400"><svg class="inline-block w-4 h-4 mr-1 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 1.8% since last week</p>
          </div>

          <!-- Card 3 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Orders Pending</h3>
              <div class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Today</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">23</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Needs attention</p>
          </div>
        </div>

        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Recent Activity</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">Sarah G.</span> added a new project "Website Redesign".</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">You</span> updated task "Fix Login Bug".</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
            </li>
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">System</span> generated new sales report.</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 days ago</span>
            </li>
          </ul>
        </div>

      </div>
    </main>
  </div>
</div>

<!-- Alpine.js for dropdowns and sidebar toggle -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<!-- Dark Mode Script -->
<script>
  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

  // Change the icons inside the button based on previous settings
  if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
  } else {
    themeToggleDarkIcon.classList.remove('hidden');
  }

  const themeToggleBtn = document.getElementById('theme-toggle');

  themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
      if (localStorage.getItem('color-theme') === 'light') {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
      } else {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
      }

      // if NOT set via local storage previously
    } else {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
      }
    }
  });
</script>

FinancialGridWithInteractions

A responsive grid layout component for finance/banking interfaces, featuring high contrast colors and subtle hover microinteractions. Supports dark mode and is designed for moderate complexity.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-8 text-center">
      Your Financial Overview
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

      <!-- Card 1: Account Balance -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Current Balance</h3>
            <span class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300">View Details</span>
          </div>
          <p class="text-4xl font-bold text-blue-900 dark:text-blue-500 mb-2 group-hover:scale-105 transition-transform duration-300 origin-left">$12,345.67</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
          <div class="mt-4 flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="text-xs text-gray-600 dark:text-gray-300">All accounts in good standing</span>
          </div>
        </div>
      </div>

      <!-- Card 2: Recent Transactions -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Transactions</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Starbucks Inc.</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$5.25</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Payroll Deposit</span>
              <span class="font-medium text-green-500 dark:text-green-400">+$2,100.00</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Amazon.com</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$45.99</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Monthly Subscription</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$12.99</span>
            </li>
          </ul>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
            See all <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Savings Goals -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-teal-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Savings Goals</h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">New Car</span>
                <span class="text-sm font-medium text-blue-600 dark:text-blue-400">45%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-blue-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[45%]" style="width: 25%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Down Payment</span>
                <span class="text-sm font-medium text-green-600 dark:text-green-400">78%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-green-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[78%]" style="width: 50%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Emergency Fund</span>
                <span class="text-sm font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-yellow-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[60%]" style="width: 30%;"></div>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-2 px-4 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 transform hover:scale-105">
            Add New Goal
          </button>
        </div>
      </div>

      <!-- Card 4: Upcoming Bills -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-1 lg:col-span-1">
        <div class="absolute inset-0 bg-gradient-to-br from-red-600 to-orange-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Upcoming Bills</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Netflix</span>
              <span class="font-medium text-red-500 dark:text-red-400">$19.99 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 1)</span></span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Electricity</span>
              <span class="font-medium text-red-500 dark:text-red-400">$85.50 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 5)</span></span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Credit Card Statement</span>
              <span class="font-medium text-red-500 dark:text-red-400">$250.00 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 10)</span></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-lg bg-orange-600 text-white font-semibold hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-600 transition-colors duration-300 transform hover:scale-105">
            Pay All Bills
          </button>
        </div>
      </div>

      <!-- Card 5: Investment Portfolio (Larger card) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-2 lg:col-span-2">
        <div class="absolute inset-0 bg-gradient-to-br from-sky-600 to-cyan-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Investment Portfolio</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <p class="text-2xl font-bold text-sky-900 dark:text-sky-500 group-hover:scale-105 transition-transform duration-300 origin-left">$56,789.00</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Total Value</p>
            </div>
            <div class="text-right">
              <p class="text-xl font-semibold text-green-600 dark:text-green-400 group-hover:scale-105 transition-transform duration-300 origin-right">+1.25%</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Today's Change</p>
            </div>
          </div>
          <div class="mt-6 grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">AAPL</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">150 shares</p>
              <p class="text-green-500 text-xs">+0.8%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">MSFT</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">75 shares</p>
              <p class="text-red-500 text-xs">-0.2%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">GOOG</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">20 shares</p>
              <p class="text-green-500 text-xs">+1.5%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">TSLA</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">30 shares</p>
              <p class="text-green-500 text-xs">+2.1%</p>
            </div>
          </div>
          <a href="#" class="mt-6 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
            Manage Portfolio <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

Art Deco Purple Documentation Component

A moderate complexity documentation/wiki component with an Art Deco design theme, featuring geometric patterns and luxurious styling using a purple/violet color spectrum. Fully responsive with dark mode support.

Open Preview

                <div class="font-sans bg-gradient-to-br from-purple-100 to-indigo-100 min-h-screen p-4 dark:from-gray-900 dark:to-black md:p-8">

  <!-- Component Wrapper -->
  <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden dark:bg-zinc-800 transform transition-all duration-500 hover:scale-[1.005] hover:shadow-3xl border-t-4 border-l-4 border-purple-600 dark:border-purple-800">

    <!-- Header Section -->
    <div class="relative p-6 md:p-10 bg-purple-800 text-white dark:bg-purple-950 overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-700 before:to-fuchsia-600 before:opacity-30 dark:before:from-purple-900 dark:before:to-fuchsia-900 before:blur-sm">
      <div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg font-serif mb-4 md:mb-0">
          <span class="block">Documentation</span>
          <span class="block text-purple-200 text-2xl md:text-3xl lg:text-4xl mt-2 font-light">Art Deco Archives</span>
        </h1>
        <div class="flex space-x-4">
          <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            New Page
          </button>
          <button class="px-6 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2400/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            Search
          </button>
        </div>
      </div>
      
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat bg-center opacity-10" style="background-image: url('data:image/svg+xml

Sticky Navigation Component

A simple, clean, and trustworthy sticky navigation bar suitable for corporate and professional websites, especially job boards and career platforms. Features high-contrast colors, responsiveness, and dark mode support.

Open Preview

                <nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-800 transition duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition duration-200">
      JobBoard
    </a>

    <!-- Navigation Links - Desktop -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Jobs</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Companies</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Candidates</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">About Us</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Contact</a>
    </div>

    <!-- Action Buttons - Desktop -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
        Sign In
      </a>
      <a href="#" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Post a Job
      </a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, shown by JS in a real app) -->
  <div class="md:hidden flex flex-col space-y-2 p-4 border-t border-gray-200 dark:border-gray-700" style="display: none;">
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Jobs</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Companies</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Candidates</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">About Us</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Contact</a>
    <a href="#" class="block px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-center transition duration-200 mt-2">Sign In</a>
    <a href="#" class="block px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">Post a Job</a>
  </div>
</nav>

Art Deco Dropdown Menu

A simple, responsive dropdown menu component with an Art Deco design style and a retro/vintage color palette, suitable for manufacturing/industrial companies. Includes dark mode support.

Open Preview

                <div class="font-sans relative inline-block text-left group">
  <button class="relative z-10 p-4 min-w-[120px] bg-slate-200 text-slate-800 font-medium tracking-wide border-b-4 border-amber-600 shadow-md transition-all duration-300 ease-in-out
                   dark:bg-slate-700 dark:text-slate-200 dark:border-blue-300
                   hover:bg-amber-300 hover:text-slate-900 hover:shadow-lg dark:hover:bg-blue-600 dark:hover:text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-blue-400 dark:focus:ring-offset-slate-800">
    <span class="flex items-center justify-between">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </span>
    <div class="absolute inset-0 border-t-4 border-l-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 group-hover:translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
    <div class="absolute inset-0 border-r-4 border-b-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
  </button>

  <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg
              bg-slate-100 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible
              group-hover:opacity-100 group-hover:visible translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-in-out transform
              dark:bg-slate-800 dark:ring-white dark:ring-opacity-10">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-0">Production</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-1">Inventory</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-2">Logistics</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-3">Maintenance</a>
    </div>
  </div>
</div>

Product Comparison Component - Organic/Nature-inspired Autumn Colors

A complex, responsive product comparison component with an organic/nature-inspired design, using autumn colors. Suitable for sports and fitness applications, with full dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
      Compare Your Game Changers
    </h2>
    <p class="mt-4 mb-12 text-xl text-center text-stone-700 dark:text-stone-300 max-w-3xl mx-auto leading-relaxed">
      Find the perfect fit for your athletic journey by comparing features, performance, and value across our top picks.
    </p>

    <div class="overflow-x-auto relative shadow-2xl rounded-3xl bg-white dark:bg-stone-800 p-2" style="background: linear-gradient(135deg, var(--tw-bg-from) 0%, var(--tw-bg-to) 100%); --tw-bg-from: #fef3c7; --tw-bg-to: #fed7aa; dark:--tw-bg-from: #3f3f46; dark:--tw-bg-to: #292524;">
      <table class="w-full text-left table-fixed border-separate [border-spacing:0.5rem] md:[border-spacing:1rem]">
        <thead>
          <tr class="text-sm text-stone-600 dark:text-stone-300 uppercase leading-snug">
            <th class="hidden lg:table-cell w-[12rem] md:w-[15rem] py-3 pl-4 sm:pl-6 bg-transparent"></th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-orange-700 dark:bg-orange-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-orange-100 dark:text-orange-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Chosen</p>
              <h3 class="text-orange-100 dark:text-orange-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">SwiftStride</h3>
            </th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-red-700 dark:bg-red-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-red-100 dark:text-red-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Alternative</p>
              <h3 class="text-red-100 dark:text-red-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">PeakPro</h3>
            </th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-brown-700 dark:bg-brown-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-brown-100 dark:text-brown-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Advanced</p>
              <h3 class="text-brown-100 dark:text-brown-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">EnduraMax</h3>
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Images & Prices -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 text-lg align-top">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L20 20m-6-6l-2-2m2-2l2-2"></path>
                </svg>
                <span>Product Snapshot</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-orange-500 dark:group-hover:border-orange-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/178/150/150" alt="SwiftStride running shoes" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-orange-700 dark:text-orange-300">$129.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-red-500 dark:group-hover:border-red-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/187/150/150" alt="PeakPro hiking boots" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-red-700 dark:text-red-300">$99.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-amber-500 dark:group-hover:border-amber-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/163/150/150" alt="EnduraMax training gear" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-brown-700 dark:text-brown-300">$149.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
          </tr>

          <!-- Key Features -->
          <tr class="group border-t border-stone-200 dark:border-stone-700 sticky top-0">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4m5-12v4m-2-2h4M8 9h11a2 2 0 012 2v7a2 2 0 01-2 2H8l-4 4V9a2 2 0 012-2z"></path>
                </svg>
                <span>Key Features</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Lightweight</li>
                  <li>Responsive Sole</li>
                  <li>Breathable Mesh</li>
                </ul>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Durable Traction</li>
                  <li>Ankle Support</li>
                  <li>Water-Resistant</li>
                </ul>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Compression Fit</li>
                  <li>Moisture-Wicking</li>
                  <li>UV Protection</li>
                </ul>
              </div>
            </td>
          </tr>

          <!-- Performance Rating -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm0 0V6m0 6a2 2 0 100-4 2 2 0 000 4zm12 5a2 2 0 100-4 2 2 0 000 4zm0 0V5"></path>
                </svg>
                <span>Performance Rating</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-orange-600 dark:text-orange-400 font-bold text-xl">9.2/10</p>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-red-600 dark:text-red-400 font-bold text-xl">8.5/10</p>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-brown-600 dark:text-brown-400 font-bold text-xl">9.5/10</p>
              </div>
            </td>
          </tr>

          <!-- Customer Reviews -->
          <tr class="group border-b border-stone-200 dark:border-stone-700">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                </svg>
                <span>Customer Reviews</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-orange-500 dark:text-orange-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                  <span class="ml-1 text-sm">(2.8K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Absolutely transformed my runs! So light and supportive. A definite must-have for serious athletes."
                  <cite class="block not-italic mt-1 font-bold">- Alex P.</cite>
                </blockquote>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-red-500 dark:text-red-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
                  <span class="ml-1 text-sm">(1.5K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Great for trails, very sturdy. Took a little breaking in, but worth it for the grip and durability."
                  <cite class="block not-italic mt-1 font-bold">- Jamie L.</cite>
                </blockquote>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-brown-500 dark:text-brown-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                  <span class="ml-1 text-sm">(3.1K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Unbeatable comfort and performance. Whether gym or field, this gear keeps me cool and focused."
                  <cite class="block not-italic mt-1 font-bold">- Chris M.</cite>
                </blockquote>
              </div>
            </td>
          </tr>

          <!-- Action Buttons -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <span>Take Action</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Buy Now
                </a>
                <a href="#" class="mt-2 text-orange-600 dark:text-orange-400 text-xs sm:text-sm hover:underline">Learn More</a>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Add to Cart
                </a>
                <a href="#" class="mt-2 text-red-600 dark:text-red-400 text-xs sm:text-sm hover:underline">View Details</a>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-brown-600 hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Shop Now
                </a>
                <a href="#" class="mt-2 text-brown-600 dark:text-brown-400 text-xs sm:text-sm hover:underline">Customize</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-12 text-center">
      <p class="text-stone-700 dark:text-stone-300 text-lg sm:text-xl max-w-2xl mx-auto leading-relaxed">
        Still unsure? Our expert team is ready to guide you to your perfect sports gear. <a href="#" class="text-orange-700 dark:text-orange-400 font-semibold hover:underline">Contact us today!</a>
      </p>
    </div>
  </div>
</div>

Memphis_Audio_Player_Component

A responsive audio player component inspired by Memphis Design, featuring bold geometric shapes and warm neutral colors, with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl shadow-xl overflow-hidden relative border-4 border-stone-200 dark:border-stone-700 bg-amber-50 dark:bg-stone-900 animate-fade-in">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-rose-300 dark:bg-rose-700 rounded-full opacity-70 rotate-12"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-lime-300 dark:bg-lime-700 rounded-full opacity-70 -rotate-45"></div>
    <div class="absolute top-1/4 left-0 w-16 h-16 bg-sky-300 dark:bg-sky-700 transform -translate-x-1/2 rotate-90"></div>
    <div class="absolute bottom-1/3 right-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-700 transform translate-x-1/2 -rotate-12"></div>
    <div class="absolute top-qtr right-1/4 w-12 h-12 bg-orange-300 dark:bg-orange-700 rounded-lg opacity-80 rotate-45"></div>

    <div class="relative p-6 sm:p-8 lg:p-10 z-10">

      <!-- Header / Album Art -->
      <div class="flex flex-col items-center mb-6 sm:mb-8">
        <div class="w-40 h-40 sm:w-48 sm:h-48 rounded-2xl overflow-hidden shadow-lg border-4 border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 ease-in-out">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-900 dark:text-stone-100 mt-5 mb-1 text-center font-serif leading-tight">Groovy Synthwave Hits</h3>
        <p class="text-stone-600 dark:text-stone-400 text-lg sm:text-xl font-medium text-center font-sans tracking-wide">The Retro Beats</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-3 sm:h-4 mb-5 sm:mb-6 relative">
        <div class="bg-rose-500 rounded-full h-full w-2/3 shadow-md"></div>
        <div class="absolute -top-1 right-1/3 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-rose-500 border-2 border-stone-50 dark:border-stone-900 shadow-lg cursor-grab hover:scale-110 transition-transform duration-200"></div>
      </div>
      <div class="flex justify-between text-sm sm:text-base text-stone-500 dark:text-stone-400 mb-8 sm:mb-10">
        <span>2:45</span>
        <span>-1:15</span>
      </div>

      <!-- Controls -->
      <div class="grid grid-cols-5 items-center gap-4 text-stone-800 dark:text-stone-200">
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18V6l-8 6 8 6zm3.29-1.39L18 12l-3.71-4.61C14.1 6.57 15.03 6 16 6h1c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1h-1c-.97 0-1.9-.57-2.71-1.39z"/></svg>
          <span class="sr-only">Previous Track</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
          <span class="sr-only">Volume</span>
        </button>

        <button class="col-span-1 flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-rose-500 text-white shadow-lg border-4 border-stone-50 dark:border-stone-900 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-rose-300 focus:ring-opacity-70 transition-all duration-300 group -mt-4">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          <span class="sr-only">Play/Pause</span>
        </button>

        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-sky-200 dark:bg-sky-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-sky-300 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-sky-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>
          <span class="sr-only">Repeat</span>
        </button>
        <button class="col-span-1 flex items-center justify-center p-2 rounded-xl bg-orange-200 dark:bg-orange-700 bg-opacity-70 dark:bg-opacity-70 hover:bg-orange-300 dark:hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-50 transition-colors duration-200 group">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M13 6v14l8-6-8-8zM6.71 16.39L6 18c.97 0 1.9.57 2.71 1.39C9.9 20.43 10.83 21 11.72 21H12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-.28c-.89 0-1.82.57-2.71 1.39S6.9 6.57 6 7.61L6.71 6.39l-3.71 4.61L6 12l-3.71-4.61z"/></svg>
          <span class="sr-only">Next Track</span>
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  /* Add custom keyframes for entry animation */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>

Industrial_Rainbow_Healthcare_Loader

An industrial-style loader component for healthcare applications, featuring raw elements, a multi-color rainbow gradient, and full responsiveness with dark mode support. Utilizes simple CSS animations for the loading effect.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative flex flex-col items-center justify-center w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-red-500 via-yellow-500 to-indigo-500 dark:from-red-700 dark:via-yellow-700 dark:to-indigo-700 opacity-20 blur-xl"></div>
    
    <div class="relative z-10 flex flex-col items-center">
      <!-- Healthcare/Medical Icon -->
      <div class="mb-6 text-indigo-600 dark:text-indigo-400">
        <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 16H4V8h16v12zm-9-4h2v2h-2v-2zm-2-4h2v2h-2v-2zm4 0h2v2h-2v-2zm2-4h2v2h-2V8z"/>
        </svg>
      </div>

      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-4 text-center tracking-tight">
        Processing Medical Data
      </h2>
      <p class="text-base text-gray-600 dark:text-gray-300 mb-8 text-center max-w-xs sm:max-w-md">
        Please wait while we securely process your information. This may take a moment.
      </p>

      <!-- Industrial-style Loader -->
      <div class="relative w-24 h-24 mb-8">
        <div class="absolute inset-0 rounded-full border-4 border-dashed border-gray-300 dark:border-gray-600"></div>
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-slow" style="border-top-color: #ef4444; border-right-color: #f97316; border-bottom-color: #eab308; border-left-color: #22c55e;"></div>
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-fast" style="border-top-color: #3b82f6; border-left-color: #a855f7; border-bottom-color: #ec4899; border-right-color: #14b8a6;"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-300 dark:bg-gray-600 w-6 h-6 rounded-full"></div>

        <!-- Gears / Cog-like elements -->
        <div class="absolute top-0 right-0 w-8 h-8 bg-gray-400 dark:bg-gray-500 rounded-full transform rotate-45 animation-delay-200 animate-spin-fast opacity-80" style="border: 2px solid rgba(0,0,0,0.1);"></div>
        <div class="absolute bottom-0 left-0 w-6 h-6 bg-gray-400 dark:bg-gray-500 rounded-full transform rotate-90 animation-delay-400 animate-spin-slow opacity-80" style="border: 2px solid rgba(0,0,0,0.1);"></div>
      </div>

      <div class="text-sm text-gray-500 dark:text-gray-400 font-medium mb-2">
        Initiating Secure Connection...
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden relative">
        <div class="absolute top-0 left-0 h-full w-0 rounded-full transition-all duration-1000 ease-in-out bg-gradient-to-r from-red-500 to-indigo-500 dark:from-red-700 dark:to-indigo-700 animate-pulse-width" style="animation-duration: 2s; animation-iteration-count: infinite;"></div>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes spin-fast {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); } /* Counter-clockwise */
  }
  @keyframes pulse-width {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 0%; }
  }

  .animate-spin-slow {
    animation: spin-slow 4s linear infinite;
  }
  .animate-spin-fast {
    animation: spin-fast 2s linear infinite;
  }
  .animate-pulse-width {
    animation: pulse-width 2s ease-in-out infinite;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-400 {
    animation-delay: 0.4s;
  }
</style>

Two-Factor Authentication Component

A complex, dark mode UI two-factor authentication component with muted colors, suitable for event/conference websites. Features input fields for codes, resend and change method options, and a clear call to action.

Open Preview

                <div class="min-h-screen bg-gray-900 text-gray-200 p-4 flex items-center justify-center dark">
  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48"
          src="https://picsum.photos/400/500?grayscale&blur=5"
          alt="Abstract geometric pattern">
      </div>
      <div class="p-6 md:p-8 flex-1">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-2xl md:text-3xl font-extrabold text-gray-50 uppercase tracking-wide">Secure Login</h2>
          <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2h-2a2 2 0 01-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M5 10v6a2 2 0 002 2h4a2 2 0 002-2v-6m-9-4h11a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2a2 2 0 002 2z">
            </path>
          </svg>
        </div>

        <p class="text-gray-300 mb-6 text-sm md:text-base">
          A security code has been sent to your registered email address.
          Please enter it below to complete your login.
        </p>

        <form>
          <div class="grid grid-cols-6 gap-3 mb-6">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
          </div>

          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 text-sm md:text-base">
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out mb-2 sm:mb-0">Resend
              Code</a>
            <span class="text-gray-400 hidden sm:inline-block">•</span>
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out">Change
              Authentication Method</a>
          </div>

          <button type="submit"
            class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-300 ease-in-out text-lg md:text-xl transform hover:scale-105">
            Verify
          </button>
        </form>

        <p class="text-center text-gray-500 mt-8 text-xs md:text-sm">
          Need help? <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium">Contact Support</a>
        </p>
      </div>
    </div>
  </div>
</div>

Interactive Photo Gallery Buttons

A set of responsive, interactive buttons designed for photo galleries and photographer portfolios, featuring a forest/green color palette and subtle micro-interaction effects for user engagement. Includes dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Explore Galleries</h2>
  <div class="flex flex-wrap justify-center gap-4">

    <!-- Primary Button: View All Photos -->
    <button class="group relative inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                   dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600
                   overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-800 dark:bg-emerald-900"></span>
      <span class="relative z-10 flex items-center">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
        </svg>
        View All Photos
      </span>
    </button>

    <!-- Secondary Button: Categories -->
    <button class="group relative inline-flex items-center justify-center px-6 py-3 border border-emerald-600 text-base font-medium rounded-full text-emerald-700 bg-white hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                   dark:border-emerald-600 dark:text-emerald-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-emerald-600
                   overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-100 dark:bg-emerald-900"></span>
      <span class="relative z-10 flex items-center">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 3a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V6a1 1 0 00-1-1H7V4a1 1 0 00-1-1zM5 7h4v2H5V7zm8-4a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V6a1 1 0 00-1-1h-3V4a1 1 0 00-1-1zM11 7h4v2h-4V7zM4 13a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 00-1-1H4zm1 2h4v2H5v-2zm8-2a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 00-1-1h-3zm1 2h4v2h-4v-2z"></path>
        </svg>
        Categories
      </span>
    </button>

    <!-- Tertiary Button: Hire Me -->
    <button class="group relative inline-flex items-center justify-center px-6 py-3 border-2 border-emerald-500 text-base font-medium rounded-full text-emerald-600 hover:text-white bg-transparent hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                   dark:border-emerald-400 dark:text-emerald-400 dark:hover:text-white dark:hover:bg-emerald-500 dark:focus:ring-emerald-500
                   overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-600 dark:bg-emerald-500"></span>
      <span class="relative z-10 flex items-center">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
        </svg>
        Hire Me
      </span>
    </button>

  </div>

  <p class="mt-8 text-sm text-gray-500 dark:text-gray-400">
    Click to explore more, with subtle visual feedback.
  </p>
</div>

1 ... 83 84 85 86 87 ... 335