Search Components

All Components

Browse all available Tailwind CSS components

Industrial_Candy_Finance_Badges_Component

A complex badges component for finance/banking, blending industrial aesthetics with bright candy colors. Features multiple interactive badges, responsive design, and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-gray-200 tracking-tight leading-tight">
    <span class="text-pink-500">Financial</span> <span class="text-cyan-400">Insights</span> Badges
  </h2>

  <!-- Industrial Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-4 border-gray-300 dark:border-gray-700
              transform skew-y-1 rotate-1 translate-x-1 translate-y-1
              transition-transform duration-300 hover:skew-y-0 hover:rotate-0 hover:translate-x-0 hover:translate-y-0
              relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-100 before:to-gray-200 dark:before:from-gray-900 dark:before:to-gray-950 before:opacity-5 dark:before:opacity-10 ">

    <!-- Exposed Elements Top Border -->
    <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 dark:from-pink-600 dark:via-purple-600 dark:to-cyan-600 rounded-t-lg"></div>

    <!-- Inner Content Area -->
    <div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col lg:flex-row gap-8 items-start">

      <!-- Left Section: Main Badges Area -->
      <div class="flex-1 w-full">
        <h3 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-200 flex items-center justify-between">
          <span>Your Current Status</span>
          <svg class="h-7 w-7 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707m1.279-.621A6 6 0 0112 2c2.652 0 4.972 1.258 6.367 3.17c1.701 2.378 1.83 5.464-.176 7.747C15.688 15.753 13.921 18 12 18s-3.688-2.247-5.823-4.908c-2.006-2.283-1.877-5.369.176-7.747C4.657 5.176 6.98 4 9.663 4H12z" /></svg>
        </h3>

        <!-- Badges Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">

          <!-- Badge 1: Savings Goal -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 border-2 border-pink-300 dark:border-pink-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-pink-500 text-white rounded-full mr-4 shadow-lg group-hover:rotate-6 transition-transform">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8h6m-5 0h.01M12 4h.01M12 4v12a4 4 0 004 4h0M12 4v12a4 4 0 01-4 4h0m0-16v12a4 4 0 004 4h0m0-16v12a4 4 0 01-4 4h0m-4-7h4m-4 0h.01M17 7H7a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2V9a2 2 0 00-2-2z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-pink-700 dark:text-pink-300">Savings Goal</p>
              <p class="text-sm text-pink-600 dark:text-pink-400">80% Achieved</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-pink-400 text-white dark:bg-pink-600">High</span>
          </div>

          <!-- Badge 2: Credit Score -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900 dark:to-cyan-800 border-2 border-cyan-300 dark:border-cyan-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-cyan-500 text-white rounded-full mr-4 shadow-lg group-hover:-rotate-6 transition-transform">
              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4v10a2 2 0 002 2h12a2 2 0 002-2V4" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-cyan-700 dark:text-cyan-300">Credit Score</p>
              <p class="text-sm text-cyan-600 dark:text-cyan-400">Excellent (780)</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-cyan-400 text-white dark:bg-cyan-600">Stable</span>
          </div>

          <!-- Badge 3: Investment Growth -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 border-2 border-purple-300 dark:border-purple-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-purple-500 text-white rounded-full mr-4 shadow-lg group-hover:scale-110 transition-transform">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-purple-700 dark:text-purple-300">Investment Growth</p>
              <p class="text-sm text-purple-600 dark:text-purple-400">+15% YTD</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-purple-400 text-white dark:bg-purple-600">Growing</span>
          </div>

          <!-- Badge 4: Emergency Fund -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 border-2 border-green-300 dark:border-green-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-green-500 text-white rounded-full mr-4 shadow-lg group-hover:translate-x-1 transition-transform">
              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-green-700 dark:text-green-300">Emergency Fund</p>
              <p class="text-sm text-green-600 dark:text-green-400">3 Months Covered</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-green-400 text-white dark:bg-green-600">Good</span>
          </div>

          <!-- Badge 5: Debt-to-Income -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 border-2 border-yellow-300 dark:border-yellow-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-yellow-500 text-white rounded-full mr-4 shadow-lg group-hover:rotate-12 transition-transform">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-yellow-700 dark:text-yellow-300">Debt-to-Income</p>
              <p class="text-sm text-yellow-600 dark:text-yellow-400">Decreasing (28%)</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-yellow-400 text-white dark:bg-yellow-600">Monitor</span>
          </div>

          <!-- Badge 6: Budget Compliance -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 border-2 border-blue-300 dark:border-blue-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-blue-500 text-white rounded-full mr-4 shadow-lg group-hover:-translate-y-1 transition-transform">
              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c.74 3.05 2.11 5.86 4.09 8.23a10.001 10 0 0014.17-14.17c-2.37-1.98-5.18-3.35-8.23-4.09z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-blue-700 dark:text-blue-300">Budget Compliance</p>
              <p class="text-sm text-blue-600 dark:text-blue-400">95% On Track</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-blue-400 text-white dark:bg-blue-600">OK</span>
          </div>

        </div>

        <!-- Call to Action / Information Area -->
        <div class="p-6 rounded-lg bg-gray-50 dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 text-center relative overflow-hidden group">
          <div class="absolute top-0 left-0 w-full h-full bg-opacity-10 dark:bg-opacity-20 bg-pink-500 dark:bg-cyan-500 transform -skew-y-3 group-hover:skew-y-0 transition-transform duration-300"></div>
          <p class="relative z-10 text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">
            Need a financial tune-up? Connect with an advisor.
          </p>
          <button class="relative z-10 px-6 py-2 rounded-full font-bold
                         bg-gradient-to-r from-pink-500 to-purple-500 text-white
                         hover:from-pink-600 hover:to-purple-600 shadow-lg
                         transform hover:-translate-y-1 transition-transform duration-200">
            Schedule a Call
          </button>
        </div>

      </div>

      <!-- Right Section: Recent Activity / Profile -->
      <div class="w-full lg:w-1/3 p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-600 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80">
        <h3 class="text-xl font-bold mb-5 text-gray-800 dark:text-gray-200">Recent Activity</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-pink-400 dark:bg-pink-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Credit Card Payment</span>
            <span class="font-semibold text-pink-600 dark:text-pink-400">- $500</span>
          </li>
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-cyan-400 dark:bg-cyan-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Investment Deposit</span>
            <span class="font-semibold text-cyan-600 dark:text-cyan-400">+ $1,200</span>
          </li>
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-purple-400 dark:bg-purple-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Mortgage Payment</span>
            <span class="font-semibold text-purple-600 dark:text-purple-400">- $1,800</span>
          </li>
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-green-400 dark:bg-green-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Q4 Dividend Payout</span>
            <span class="font-semibold text-green-600 dark:text-green-400">+ $250</span>
          </li>
        </ul>

        <h3 class="text-xl font-bold mt-8 mb-4 text-gray-800 dark:text-gray-200">Your Profile</h3>
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-16 h-16 rounded-full border-4 border-cyan-400 dark:border-cyan-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Premium Member</p>
          </div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
          Dedicated to achieving financial freedom through smart choices and consistent habits.
        </p>
        <button class="w-full px-4 py-2 rounded-md font-bold
                        bg-gradient-to-r from-cyan-500 to-green-500 text-white
                        hover:from-cyan-600 hover:to-green-600 shadow-lg
                        transform hover:-translate-x-1 hover:-translate-y-1 transition-transform duration-200">
          Edit Profile
        </button>
      </div>

    </div>

    <!-- Exposed Elements Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-green-400 via-blue-400 to-purple-400 dark:from-green-600 dark:via-blue-600 dark:to-purple-600 rounded-b-lg"></div>

  </div>
</div>

Sticky Navigation Component

A complex, responsive sticky navigation component with a 3D design aesthetic and a forest/green color palette, suitable for healthcare/medical applications. Includes dark mode support and interactive elements.

Open Preview

                <nav class="sticky top-0 z-50 w-full backdrop-blur-sm bg-lime-100/80 dark:bg-emerald-950/80 shadow-lg dark:shadow-emerald-700/30 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-2 md:mb-0">
      <a href="#" class="flex items-center space-x-2 text-emerald-800 dark:text-emerald-50 font-bold text-2xl md:text-3xl tracking-tight">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-emerald-600 dark:text-emerald-400 transform -rotate-12 transition-transform duration-300 ease-in-out" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-11h2v6h-2zm0 8h2v2h-2z"/>
          <path d="M12 11a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1zm0 8a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z" fill="url(#gradient)"/>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#10B981" />
              <stop offset="100%" stop-color="#059669" />
            </linearGradient>
          </defs>
        </svg>
        <span class="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.1)]">MedCare</span>
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-2 transition-all duration-200 ease-in-out">
        <svg class="w-7 h-7 text-emerald-700 dark:text-emerald-200" 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 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <div id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto text-center md:text-left">
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Home
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <div class="relative group">
        <button class="flex items-center text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md py-2 md:py-0">
          Services
          <svg class="ml-1 w-4 h-4 transition-transform duration-200 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-emerald-900 shadow-xl dark:shadow-emerald-800/50 rounded-lg py-2 mt-2 w-48 transition-all duration-300 ease-out transform origin-top-left scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 perspective-100 rotate-x-5">
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Consultation
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Appointments
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Health Records
          </a>
        </div>
      </div>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        About Us
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>

      <div class="flex items-center space-x-4 md:ml-auto mt-4 md:mt-0">
        <button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-200 shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
          <svg class="w-6 h-6 sun-icon" 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 3v1m0 16v1m9-9h1M3 12H2m15.325-4.573l.707-.707M3.929 19.071l.707-.707m-4.596 0l-.707.707M19.071 3.929l-.707.707M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path>
          </svg>
          <svg class="w-6 h-6 moon-icon hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
        <a href="#" class="flex items-center p-2 rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <img class="w-8 h-8 rounded-full object-cover mr-2 brightness-90 contrast-125 saturate-150" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <span class="text-sm font-medium hidden lg:block perspective-100 rotate-x-5">Dr. Smith</span>
            <svg class="w-5 h-5 ml-2 hidden lg:block transition-transform transform rotate-90" 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.121 17.804A11.952 11.952 0 0112 15c4.764 0 9.102 1.341 12 3.654-.539-7.243-7.533-13.654-15-13.654S-3.539 10.561-3 17.804zM12 10a4 4 0 100-8 4 4 0 000 8z"></path></svg>
        </a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggle = document.getElementById('dark-mode-toggle');
  const sunIcon = darkModeToggle.querySelector('.sun-icon');
  const moonIcon = darkModeToggle.querySelector('.moon-icon');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  const preferredTheme = localStorage.getItem('theme');
  if (preferredTheme === 'dark' || (!preferredTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  } else {
    setDarkMode(false);
  }

  darkModeToggle.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Navbar Toggle Logic for Mobile
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
  });

  // Close mobile menu when a link is clicked
  navbarMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      if (!navbarMenu.classList.contains('hidden') && window.innerWidth < 768) { // Only close if mobile menu is open and on mobile size
        navbarMenu.classList.add('hidden');
        navbarMenu.classList.remove('flex');
      }
    });
  });

</script>

Retro Corporate Shopping Cart Component

A complex, responsive shopping cart component with a retro/vintage design style, focusing on 80s/90s aesthetics and corporate blue tones, suitable for manufacturing/industrial applications. Includes dark mode support and interactive elements.

Open Preview

                <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-6xl bg-white border-4 border-blue-800 shadow-lg p-6 rounded-lg relative overflow-hidden dark:bg-gray-800 dark:border-blue-500">
    <!-- Retro Header Bar -->
    <div class="absolute top-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-b-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">SYSTEM CART V1.9.89Beta</span>
      <div class="flex space-x-2">
        <span>[FILE]</span>
        <span>[EDIT]</span>
        <span>[VIEW]</span>
        <span>[HELP]</span>
      </div>
    </div>
    <div class="pt-10 pb-4">
      <!-- Main Content Area -->
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items Section -->
        <div class="lg:w-2/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> INVENTORY SELECTION: ACTIVE</h2>

          <!-- Cart Item 1 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/tool1/120/120" alt="Industrial Robot Arm" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Z-900 Automated Assembly Arm</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: IND-RA9001 | Lot: 01-2023</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="2" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$49,999.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <!-- Cart Item 2 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/gearbox/120/120" alt="Precision Gearbox" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">HD Precision Gearbox (Model M8)</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: PART-GBM800 | Lot: 03-2024</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="5" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$1,250.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
            <button class="px-6 py-2 bg-blue-200 border-2 border-blue-400 text-blue-800 hover:bg-blue-300 rounded-md shadow-md dark:bg-blue-800 dark:border-blue-600 dark:text-blue-200 dark:hover:bg-blue-700">
              \u003c\u003c ADD MORE ITEMS
            </button>
            <button class="text-red-600 hover:underline">
              CLEAR ALL ITEMS
            </button>
          </div>
        </div>

        <!-- Order Summary Section -->
        <div class="lg:w-1/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> ORDER LOG: SUMMARY</h2>

          <div class="mb-4">
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Item Subtotal:</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$101,248.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Shipping (Freight):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$750.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Estimated Tax (7.5%):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$7,650.00</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-lg font-bold text-blue-800 dark:text-blue-300">TOTAL DUE:</span>
              <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100">$109,648.00</span>
            </div>
          </div>

          <div class="mb-6">
            <label for="promo" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-300">PROMO CODE / ACCOUNT ID:</label>
            <div class="flex">
              <input type="text" id="promo" class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" placeholder="Enter code">
              <button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-600">
                APPLY
              </button>
            </div>
          </div>

          <p class="text-gray-600 text-xs mb-4 dark:text-gray-400">
            <strong class="text-yellow-600 dark:text-yellow-400">\u003e\u003e SYSTEM MESSAGE:</strong> All orders are subject to final review and confirmation. Lead times may vary based on component availability. For bulk discounts, contact sales.
          </p>

          <button class="w-full bg-blue-800 text-white font-bold py-3 mt-4 rounded-md shadow-lg hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-500">
            \u003c\u003c INITIATE CHECKOUT PROTOCOL \u003e\u003e
          </button>
        </div>
      </div>
    </div>
    <!-- Retro Footer Bar -->
    <div class="absolute bottom-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-t-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">STATUS: READY | USER: JDOE89 | SESSION: ACTIVE</span>
      <div class="flex space-x-4">
        <span>[F1-Help]</span>
        <span>[F5-Refresh]</span>
        <span>[F12-Exit]</span>
      </div>
    </div>
  </div>
</div>

Minimalist Jewel-Tone Food/Restaurant Navigation

A minimalist and responsive navigation component for food and restaurant websites, featuring jewel tones, dark mode support, and a clean flat design. Includes a logo, navigation links, and a call-to-action button, with a mobile-friendly hamburger menu.

Open Preview

                <nav class="bg-emerald-600 dark:bg-emerald-900 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-1.636 6.364l-.707-.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M9 11a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0zm-9 9a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z"></path>
      </svg>
      <span class="text-white text-xl font-bold font-serif">FoodieFinds</span>
    </a>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#menu" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#how-it-works" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        How It Works
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#restaurants" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Restaurants
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#contact" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <!-- Call to Action Button -->
    <div class="hidden md:block">
      <button class="bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none focus:ring-2 focus:ring-emerald-200 rounded-md p-1" aria-label="Toggle menu">
        <svg class="h-7 w-7" 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 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation Menu (hidden by default, would be toggled by JS) -->
  <!-- For demonstration, using simple display classes; in a real app, you'd use JS to toggle 'hidden' -->
  <div class="md:hidden hidden bg-emerald-700 dark:bg-emerald-800 py-2" id="mobile-menu">
    <a href="#menu" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Menu</a>
    <a href="#how-it-works" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">How It Works</a>
    <a href="#restaurants" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Restaurants</a>
    <a href="#contact" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Contact</a>
    <div class="px-4 py-2">
      <button class="w-full bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>
  </div>
</nav>

Material_Design_Video_Player_Component

A responsive video player component with Material Design aesthetics, warm neutral color scheme, dark mode support, suitable for booking/reservation systems. Features a video thumbnail, play button, title, description, and a 'Book Now' call to action.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative">
    <!-- Video Thumbnail & Play Button -->
    <div class="relative pb-9/16 overflow-hidden group">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <button class="p-4 md:p-6 bg-amber-500 text-white rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50" aria-label="Play Video">
          <svg class="h-8 w-8 md:h-10 md:w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 md:p-8">
      <h3 class="text-2xl sm:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-3 leading-tight">
        Exclusive Tour: Discover Our Premier Service
      </h3>
      <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg mb-5 leading-relaxed">
        Watch this short video to get a comprehensive understanding of our top-tier service, designed to cater to your specific needs. Learn about our process, benefits, and how we ensure a seamless experience from start to finish.
      </p>

      <!-- Details Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Duration:</span> 4 min 30 sec
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2v-2a2 2 0 00-2-2H4a2 2 0 00-2 2V6z"></path><path fill-rule="evenodd" d="M4 4h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm4.586 7.414a2 2 0 10-2.828 2.828L10 17.828l4.243-4.242a2 2 0 10-2.828-2.828L10 12.172l-1.414-1.414z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Format:</span> HD 1080p
          </div>
        </div>
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM1 18h18V8H1v10z"></path></svg>
            <span class="font-medium">Presenter:</span> Alex Johnson
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Relevant for:</span> All Clients
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700 mt-4">
        <button class="px-6 py-3 bg-amber-600 text-white font-semibold rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-300 transform hover:-translate-y-0.5" aria-label="Book a Reservation">
          Book Your Reservation Now
        </button>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Product_Reviews_Component

A simple, responsive product reviews component with a retro/vintage aesthetic, using professional blue tones suitable for manufacturing/industrial companies. Includes dark mode support.

Open Preview

                <section class="font-mono bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-12 uppercase tracking-wider text-blue-800 dark:text-blue-200 border-b-4 border-blue-600 dark:border-blue-400 pb-4 inline-block mx-auto">
      Customer Feedback Terminal
    </h2>

    <div class="grid gap-8 sm:grid-cols-1 lg:grid-cols-2">
      <!-- Review Card 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue- সহায়-400 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Jasper 'The Cog' Milligan</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Production Manager</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "This machinery is a workhorse! Precision engineering from a bygone era, but with modern reliability. Integrates seamlessly with our existing setup. A true industrial classic!"
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Octane 23, 1997</p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Eleanor 'The Spark' Vance</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Lead Engineer, Robotics Division</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "Absolutely fantastic! The build quality reminds me of the good old days – robust and reliable. It handles extreme conditions without a hitch. A crucial asset for our high-tech industrial applications."
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Nov 14, 1998</p>
      </div>

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

Corporate/Professional Manufacturing Columns Component

A complex, responsive columns component designed for manufacturing/industrial companies with a corporate/professional aesthetic and an autumn color scheme. Includes dark mode support and semantic HTML.

Open Preview

                <section class="py-12 bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight">
        Driving Industrial Innovation
      </h2>
      <p class="text-lg sm:text-xl text-brown-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Leading the future of manufacturing with precision, efficiency, and unwavering commitment to quality.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
      <!-- Column 1: Advanced Automation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-orange-600 dark:border-orange-500">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-orange-600 dark:bg-orange-500 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.5-1.5M15 17l.75 3L17 18.5M2.25 10.5l1.5 5.25L5.75 10.5M9 6h6M19.5 10.5l-1.5 5.25L16.25 10.5M12 21a9 9 0 100-18 9 9 0 000 18z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-300">
            Advanced Automation
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Leveraging cutting-edge robotics and AI to optimize production workflows and reduce operational costs.
          </p>
          <img src="https://picsum.photos/400/250?random=1" alt="Industrial robots" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Robotic Process Automation (RPA)</li>
            <li>Machine Learning for Predictive Maintenance</li>
            <li>Automated Quality Control Systems</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-md">
            Learn More
            <svg class="ml-2 -mr-1 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="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 2: Sustainable Manufacturing -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-burgundy-700 dark:border-burgundy-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-burgundy-700 dark:bg-burgundy-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.5l4 4L19.5 6" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-burgundy-800 dark:text-burgundy-200 mb-3 group-hover:text-burgundy-600 dark:group-hover:text-burgundy-400 transition-colors duration-300">
            Sustainable Manufacturing
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Pioneering eco-friendly production methods to minimize environmental impact and foster a greener future.
          </p>
          <img src="https://picsum.photos/400/250?random=2" alt="Eco-friendly factory" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Renewable Energy Integration</li>
            <li>Waste Reduction & Recycling Programs</li>
            <li>Carbon Footprint Optimization</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-700 hover:bg-burgundy-800 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 transition-colors duration-300 shadow-md">
            Explore Initiatives
            <svg class="ml-2 -mr-1 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="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 3: Global Supply Chain Excellence -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-brown-700 dark:border-brown-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-brown-700 dark:bg-brown-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-3 group-hover:text-brown-600 dark:group-hover:text-brown-400 transition-colors duration-300">
            Global Supply Chain Excellence
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Building resilient and efficient supply networks to ensure timely delivery and consistent product availability.
          </p>
          <img src="https://picsum.photos/400/250?random=3" alt="Global logistics network" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Real-time Logistics Tracking</li>
            <li>Supplier Relationship Management</li>
            <li>Risk Mitigation Strategies</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brown-700 hover:bg-brown-800 dark:bg-brown-600 dark:hover:bg-brown-700 transition-colors duration-300 shadow-md">
            Discover Our Reach
            <svg class="ml-2 -mr-1 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="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-800 hover:bg-burgundy-900 dark:bg-burgundy-700 dark:hover:bg-burgundy-800 transition-colors duration-300 shadow-lg sm:text-xl">
        Contact Our Experts
        <svg class="ml-3 -mr-1 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H8a2 2 0 00-2 2v6a2 2 0 002 2h9a2 2 0 002-2v-6a2 2 0 00-2-2zM9 11a1 1 0 100 2h6a1 1 0 100-2H9z" />
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
  /* Custom colors for autumn palette */
  .text-brown-700 { color: #8B4513; } /* SaddleBrown */
  .dark\:text-brown-200 { color: #D2B48C; } /* Tan light for dark mode */
  .dark\:text-brown-400 { color: #A0522D; } /* Sienna light for dark mode hover */
  .bg-brown-700 { background-color: #A0522D; } /* Sienna */
  .hover\:bg-brown-800:hover { background-color: #8B4513; } /* SaddleBrown for hover */
  .dark\:bg-brown-600 { background-color: #D2B48C; } /* Tan */
  .dark\:hover\:bg-brown-700:hover { background-color: #A0522D; } /* Sienna for dark hover */

  .text-burgundy-700 { color: #800020; } /* Burgundy */
  .text-burgundy-800 { color: #6A0527; } /* slightly darker burgundy */
  .dark\:text-burgundy-200 { color: #EDC1C1; } /* light pink for dark mode */
  .dark\:text-burgundy-400 { color: #EC2E5F; } /* medium pink for dark hover */
  .bg-burgundy-700 { background-color: #800020; } /* Burgundy */
  .hover\:bg-burgundy-800:hover { background-color: #6A0527; } /* slightly darker burgundy for hover */
  .dark\:bg-burgundy-600 { background-color: #C04000; } /* Burnt Orange */
  .dark\:hover\:bg-burgundy-700:hover { background-color: #800020; } /* Burgundy for dark hover */

  .text-orange-800 { color: #CC5500; } /* Dark Orange */
  .dark\:text-orange-200 { color: #FFDAB9; } /* PeachPuff for dark */
  .dark\:text-orange-300 { color: #FFC0CB; } /* LightPink for dark heading */
  .dark\:text-orange-400 { color: #FFB347; } /* Light Orange for dark hover */
  .bg-orange-700 { background-color: #FF8c00; } /* DarkOrange */
  .hover\:bg-orange-800:hover { background-color: #CC5500; } /* Darker Orange for hover */
  .dark\:bg-orange-600 { background-color: #FFA07A; } /* LightSalmon light for dark */
  .dark\:hover\:bg-orange-700:hover { background-color: #FF8c00; } /* DarkOrange light for dark hover */

  .border-orange-600 { border-color: #FF8c00; }
  .dark\:border-orange-500 { border-color: #FFA07A; }
  .border-burgundy-700 { border-color: #800020; }
  .dark\:border-burgundy-600 { border-color: #C04000; }
  .border-brown-700 { border-color: #A0522D; }
  .dark\:border-brown-600 { border-color: #D2B48C; }
<\/style>

Nature-Inspired_Entertainment_Navigation

A complex, nature-inspired navigation component for entertainment/media platforms, featuring flowing lines and candy/sweet color schemes. Fully responsive with dark mode support.

Open Preview

                <nav class="relative bg-gradient-to-br from-purple-200 via-pink-200 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-green-950 shadow-lg dark:shadow-xl rounded-b-3xl md:rounded-b-[4rem] overflow-hidden p-4 md:p-6 lg:p-8 transform -skew-y-1 perspective-1000">
  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply dark:mix-blend-screen -skew-y-1"></div>
  <div class="relative flex flex-col md:flex-row items-center justify-between mx-auto max-w-7xl skew-y-1">
    
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2 mb-4 md:mb-0">
      <svg class="h-10 w-10 text-pink-600 dark:text-purple-400 transform rotate-45 -translate-y-1" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 100 8h10a4 4 0 100-8H7zm0 0l-4-4m4 4l-4 4m10 0l4-4m-4 4l4 4"></path>
      </svg>
      <a href="#" class="font-extrabold text-3xl text-purple-700 dark:text-pink-300 font-serif tracking-tight drop-shadow-md dark:drop-shadow-lg">WAVEFLIX</a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-purple-700 dark:text-pink-300 hover:text-pink-600 dark:hover:text-purple-400 focus:outline-none focus:ring-2 focus:ring-pink-400 rounded-md p-2 transition duration-300 ease-in-out" aria-label="Toggle navigation menu">
        <svg class="h-8 w-8" 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 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12 mt-4 md:mt-0">
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Home</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Movies</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Series</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Live</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Categories</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
    </div>

    <!-- Search and User Profile -->
    <div class="hidden md:flex items-center space-x-4 lg:space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-white/70 dark:bg-gray-800/70 border border-transparent focus:border-pink-400 focus:ring-2 focus:ring-pink-200 dark:focus:border-purple-600 dark:focus:ring-2 dark:focus:ring-purple-900 text-purple-900 dark:text-pink-100 placeholder-purple-500 dark:placeholder-pink-400 transition duration-300 ease-in-out shadow-sm dark:shadow-md backdrop-blur-sm">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-pink-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button class="relative flex items-center justify-center p-2 rounded-full bg-pink-400/80 dark:bg-purple-600/80 hover:bg-pink-500 hover:dark:bg-purple-700 transition duration-300 ease-in-out shadow-md dark:shadow-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-purple-500">
        <svg class="h-6 w-6 text-white dark:text-pink-100" 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full transform translate-x-1/2 -translate-y-1/2">3</span>
      </button>
      <a href="#" class="block relative w-10 h-10 rounded-full overflow-hidden border-2 border-pink-400 dark:border-purple-500 transform transition duration-300 ease-in-out hover:scale-110 shadow-md">
        <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Profile">
        <span class="absolute bottom-0 right-0 h-3 w-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></span>
      </a>
    </div>
  </div>
</nav>

Social Login Component

Clean, code-inspired social login component with a monospace font, warm neutral color scheme, suitable for government/public service websites. Includes responsive design and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 duration-300 p-4 font-mono antialiased">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl dark:shadow-stone-700/50 overflow-hidden border border-stone-200 dark:border-stone-700 transition-colors duration-300">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-stone-800 dark:text-stone-100 uppercase tracking-wide">Log In Securely</h2>
      <p class="text-center text-stone-600 dark:text-stone-300 text-sm sm:text-base">
        Connect using your trusted government-approved accounts.
      </p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 sm:py-3.5 border border-stone-300 dark:border-stone-600 rounded-md text-base sm:text-lg font-medium text-stone-700 dark:text-stone-200 bg-stone-50 hover:bg-stone-100 dark:bg-stone-700 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.1a7.9 7.9 0 017.9 7.9c0 4.38-3.538 7.9-7.9 7.9s-7.9-3.52-7.9-7.9c0-4.38 3.538-7.9 7.9-7.9v0zM10.8 12h2.4v-2.4h-2.4V12zm-2.4 0h-2.4v-2.4h2.4V12zm4.8 0h2.4v-2.4h-2.4V12zm-4.8-4.8h2.4v-2.4h-2.4v2.4zm-2.4 0h-2.4v-2.4h2.4v2.4zm4.8 0h2.4v-2.4h-2.4v2.4zm0-4.8h2.4v-2.4h-2.4v2.4z"></path>
          </svg>
          <span>Continue with GovConnect ID</span>
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 sm:py-3.5 border border-stone-300 dark:border-stone-600 rounded-md text-base sm:text-lg font-medium text-stone-700 dark:text-stone-200 bg-stone-50 hover:bg-stone-100 dark:bg-stone-700 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.873V14.89h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.776-3.89 1.094 0 2.24.195 2.24.195v2.454H15.83c-1.222 0-1.6.75-1.6 1.555V12h2.77l-.44 2.89h-2.33v6.983C18.343 21.128 22 16.991 22 12z"></path>
          </svg>
          <span>Sign in with CitizenNet</span>
        </button>
      </div>

      <div class="relative flex justify-center text-xs sm:text-sm text-stone-500 dark:text-stone-400">
        <span class="bg-white dark:bg-stone-800 px-2 z-10">Or continue with credentials</span>
        <div class="absolute inset-y-0 left-0 right-0 h-px bg-stone-200 dark:bg-stone-700 top-1/2 -translate-y-1/2"></div>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 tracking-tight mb-1">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-700 focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:focus:ring-amber-400 dark:focus:border-amber-400 sm:text-base transition-colors duration-200">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 tracking-tight mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-700 focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:focus:ring-amber-400 dark:focus:border-amber-400 sm:text-base transition-colors duration-200">
        </div>

        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded bg-stone-50 dark:bg-stone-700 dark:checked:bg-amber-600">
            <label for="remember-me" class="ml-2 block text-stone-600 dark:text-stone-300">
              Remember me
            </label>
          </div>

          <div class="text-right">
            <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">
              Forgot password?
            </a>
          </div>
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
          Log In
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-stone-600 dark:text-stone-300">
        Need an account? <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Register Now</a>
      </p>
    </div>
  </div>
</div>

Watercolor/Artistic Neon Footer

A simple, responsive footer component with a watercolor/artistic aesthetic and a vibrant neon color scheme, suitable for a portfolio website. Includes dark mode support.

Open Preview

                <footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
  <!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
    <div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
    <div class="flex flex-col items-center md:items-start space-y-2">
      <p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
        [Your Name/Studio]
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; <span id="current-year"></span> All rights reserved.
      </p>
    </div>

    <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
      <a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
      <a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
      <a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
      <a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
    </nav>
  </div>

  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

1 ... 89 90 91 92 93 ... 335