Search Components

All Components

Browse all available Tailwind CSS components

Retro_Industrial_Skip_Content

A retro/vintage styled 'skip to content' link component for industrial and manufacturing websites, featuring 80s/90s aesthetics, a complementary color scheme (orange/teal), and dark mode support. This complex component includes interactive elements for a rich user experience.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skip to Content Link</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'selector',
        theme: {
          extend: {
            colors: {
              'retro-orange': '#FF8C00',
              'retro-teal': '#008080',
              'retro-dark-bg': '#2C3E50',
              'retro-light-bg': '#ECF0F1',
              'retro-dark-text': '#BDC3C7',
              'retro-light-text': '#2C3E50'
            },
            fontFamily: {
              'mono-retro': ['"Roboto Mono"', 'monospace'],
              'sans-retro': ['"Press Start 2P"', 'cursive'] // For a more arcade look if needed, but mono for industrial feel
            }
          }
        }
      }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
      /* Custom styles for the skip link to ensure it's hidden until focused */
      .skip-link {
        position: absolute;
        left: -9999px;
        z-index: 100;
      }
      .skip-link:focus {
        left: 50%;
        transform: translateX(-50%);
        top: 1rem;
        padding: 0.75rem 1.5rem;
        background-color: theme('colors.retro-teal');
        color: theme('colors.retro-light-bg');
        text-decoration: none;
        border-radius: 0.5rem;
        outline: 2px solid theme('colors.retro-orange');
        outline-offset: 2px;
        transition: all 0.2s ease-in-out;
        font-family: theme('fontFamily.mono-retro');
        font-size: 0.875rem; /* sm */
        text-transform: uppercase;
        letter-spacing: 0.1em;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      /* Dark mode specific focus styles */
      html.dark .skip-link:focus {
        background-color: theme('colors.retro-orange');
        color: theme('colors.retro-dark-bg');
        outline-color: theme('colors.retro-teal');
        box-shadow: 0 4px 6px -1px rgba(255, 140, 0, 0.3), 0 2px 4px -1px rgba(255, 140, 0, 0.15);
      }

      /* Retro button hover effect */
      .retro-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06);
        filter: brightness(1.2);
      }
      html.dark .retro-button:hover {
        filter: brightness(0.8);
      }

      /* Retro glow for sections */
      .retro-glow {
        box-shadow: 0 0 15px rgba(0, 128, 128, 0.7);
      }
      html.dark .retro-glow {
        box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
      }
    </style>
</head>
<body class="bg-retro-light-bg text-retro-light-text font-mono-retro dark:bg-retro-dark-bg dark:text-retro-dark-text min-h-screen flex flex-col">

    <!-- Dark mode toggle for demonstration -->
    <button onclick="document.documentElement.classList.toggle('dark')" class="fixed top-4 right-4 z-50 p-3 rounded-full bg-retro-teal text-retro-light-bg dark:bg-retro-orange dark:text-retro-dark-bg focus:outline-none focus:ring-4 focus:ring-retro-orange dark:focus:ring-retro-teal transition-colors duration-300 shadow-md retro-button">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path class="dark:hidden" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
            <path class="hidden dark:block" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 2.828a1 1 0 01.707 1.707l-1 1a1 1 0 11-1.414-1.414l1-1A1 1 0 0114 4.828zM17 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zm8.293 4.293a1 1 0 01-1.414 0l-1-1a1 1 0 011.414-1.414l1 1a1 1 0 010 1.414zM10 15a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm-4.293-1.293a1 1 0 010-1.414l-1-1a1 1 0 011.414-1.414l1 1a1 1 0 010 1.414zM16 10c0 3.313-2.687 6-6 6s-6-2.687-6-6 2.687-6 6-6 6 2.687 6 6z"></path>
        </svg>
    </button>

    <!-- Main Navigation/Header -->
    <header class="bg-gray-800 dark:bg-gray-900 text-retro-light-bg py-4 px-6 md:px-10 shadow-lg relative z-20 retro-glow">
        <a href="#main-content" class="skip-link z-50">Skip to Main Content</a>
        <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
            <div class="flex items-center space-x-4 mb-4 md:mb-0">
                <img src="https://picsum.photos/id/237/50/50" alt="Industrial Logo" class="rounded-full border-2 border-retro-orange dark:border-retro-teal">
                <h1 class="text-2xl md:text-3xl font-sans-retro text-retro-orange dark:text-retro-teal tracking-wide">
                    <a href="#" class="hover:text-retro-light-bg transition-colors duration-200">TECHNO-WORKS INC.</a>
                </h1>
            </div>
            <nav aria-label="Primary Navigation">
                <ul class="flex flex-wrap justify-center md:space-x-8 space-x-4 text-sm md:text-base font-mono-retro">
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Products</a></li>
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Services</a></li>
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">About Us</a></li>
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Main Content Area -->
    <main id="main-content" tabIndex="-1" class="flex-grow container mx-auto px-4 py-8 md:py-16 focus:outline-none focus:ring-4 focus:ring-retro-orange dark:focus:ring-retro-teal focus:ring-offset-8 focus:rounded-lg transition-all duration-300">
        <h2 class="text-3xl md:text-4xl font-sans-retro text-center mb-8 text-retro-teal dark:text-retro-orange">Operational Overview: Data Stream</h2>

        <section class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <!-- System Status Card -->
            <div class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg p-6 rounded-lg shadow-xl border-4 border-retro-orange dark:border-retro-teal transition-all duration-300 retro-glow">
                <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-light-bg dark:border-retro-dark-bg pb-2">System Status: <span class="text-green-300 dark:text-green-700 font-bold">ONLINE</span></h3>
                <p class="mb-3">Unit 001-A: <span class="font-bold">Active</span></p>
                <p class="mb-3">Unit 001-B: <span class="font-bold">Active</span></p>
                <p class="mb-3">Sensor Array: <span class="font-bold text-yellow-300 dark:text-yellow-700">Minor Anomaly Detected</span></p>
                <button class="mt-4 w-full bg-retro-orange dark:bg-retro-dark-bg text-retro-light-bg dark:text-retro-orange py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-light-bg focus:outline-none focus:ring-2 focus:ring-retro-light-bg dark:focus:ring-retro-orange">
                    View Diagnostics
                </button>
            </div>

            <!-- Recent Activity Log (List) -->
            <div class="lg:col-span-2 bg-retro-light-bg dark:bg-gray-800 text-retro-light-text dark:text-retro-dark-text p-6 rounded-lg shadow-xl border-4 border-retro-teal dark:border-retro-orange transition-all duration-300 retro-glow">
                <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-teal dark:border-retro-orange pb-2">Recent Activity Log</h3>
                <ul class="space-y-4">
                    <li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
                        <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Operator John Doe" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
                        <p><strong>[14:32:01]</strong> Operator John D. initiated <span class="text-retro-teal dark:text-retro-orange font-bold">System Cal. 3</span>.</p>
                    </li>
                    <li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
                        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Tech Jane Smith" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
                        <p><strong>[14:28:45]</strong> Tech Jane S. performed <span class="text-retro-teal dark:text-retro-orange font-bold">Data Backup R-7</span>.</p>
                    </li>
                    <li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
                        <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Supervisor Mark Johnson" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
                        <p><strong>[14:15:20]</strong> Supervisor Mark J. approved <span class="text-retro-teal dark:text-retro-orange font-bold">Phase II Deployment</span>.</p>
                    </li>
                </ul>
            </div>
        </section>

        <!-- Operational Data Section -->
        <section class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg p-6 rounded-lg shadow-xl border-4 border-retro-orange dark:border-retro-teal transition-all duration-300 retro-glow">
            <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-light-bg dark:border-retro-dark-bg pb-2">Real-time Sensor Readings</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Temperature:</p>
                    <p class="text-xl">28.5 °C</p>
                </div>
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Pressure:</p>
                    <p class="text-xl">1012 hPa</p>
                </div>
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Humidity:</p>
                    <p class="text-xl">65%</p>
                </div>
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Vibration:</p>
                    <p class="text-xl text-red-400 dark:text-red-700">HIGH</p>
                </div>
            </div>
            <button class="mt-6 w-full md:w-auto bg-retro-light-bg dark:bg-gray-700 text-retro-teal dark:text-retro-orange py-2 px-6 rounded transition-all duration-300 retro-button border-2 border-retro-orange dark:border-retro-teal focus:outline-none focus:ring-2 focus:ring-retro-light-bg dark:focus:ring-retro-orange">
                Request Full Data Log
            </button>
        </section>

        <!-- Placeholder Content to Demonstrate Scrolling -->
        <section class="mt-16 bg-retro-light-bg dark:bg-gray-800 text-retro-light-text dark:text-retro-dark-text p-6 rounded-lg shadow-xl border-4 border-retro-teal dark:border-retro-orange transition-all duration-300 retro-glow">
            <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-teal dark:border-retro-orange pb-2">Production Metrics Analytics</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <img src="https://picsum.photos/600/400?random=1" alt="Production Chart" class="w-full h-auto rounded-lg mb-4 border-2 border-retro-orange mx-auto">
                    <p class="mb-4">Detailed analysis of Unit 003's output efficiency over the last 24 hours, showing a 5% increase in throughput after last night's maintenance cycle.</p>
                    <button class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-dark-bg focus:outline-none focus:ring-2 focus:ring-retro-orange dark:focus:ring-retro-teal">
                        Generate Report
                    </button>
                </div>
                <div>
                    <img src="https://picsum.photos/600/400?random=2" alt="Maintenance Schedule" class="w-full h-auto rounded-lg mb-4 border-2 border-retro-orange mx-auto">
                    <p class="mb-4">Upcoming routine maintenance schedule for Q3, including major system upgrades for network infrastructure and power distribution units. Contingency plans are in place.</p>
                    <button class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-dark-bg focus:outline-none focus:ring-2 focus:ring-retro-orange dark:focus:ring-retro-teal">
                        Update Schedule
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="mt-auto bg-gray-800 dark:bg-gray-900 text-retro-dark-text py-6 px-4 md:px-10 text-center text-sm font-mono-retro shadow-inner retro-glow">
        <div class="container mx-auto">
            <p>&copy; 2023 TECHNO-WORKS INC. All Rights Reserved. // Industrial Solutions Since '86</p>
            <nav class="mt-4">
                <ul class="flex flex-wrap justify-center space-x-4 md:space-x-8">
                    <li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Privacy Policy</a></li>
                    <li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Terms of Service</a></li>
                    <li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Sitemap</a></li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>

Skeuomorphic Social Media Modal

A moderately complex, responsive, skeuomorphic modal component designed for social media interactions, featuring a complementary color scheme and dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-50 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-gray-200 to-gray-300 rounded-2xl shadow-2xl overflow-hidden dark:from-neutral-700 dark:to-neutral-900 border border-gray-400 dark:border-neutral-600
              transform perspective-1000 rotateX-3 translateZ-0 transition-all duration-300 ease-in-out
              hover:scale-105 hover:rotateX-0 hover:translateZ-10 md:hover:scale-105 group">

    <!-- Top Bezel / Highlight -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-2xl opacity-75 dark:bg-neutral-600 dark:opacity-50 group-hover:h-6 transition-all duration-300"></div>

    <!-- Content Area -->
    <div class="p-6 relative z-10">

      <!-- Header Bar - Mimicking a metallic or glassy top bar -->
      <div class="flex items-center justify-between pb-4 border-b border-gray-400 dark:border-neutral-600 mb-4
                  bg-gray-100/70 dark:bg-neutral-800/70 rounded-md p-3 -mx-3 -mt-3 shadow-inner-sm shadow-gray-400/50 dark:shadow-neutral-900/50">
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">New Post</h3>
        <button class="p-2 rounded-full bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400
                       shadow-md border border-red-400 dark:bg-red-700 dark:hover:bg-red-800 dark:border-red-600
                       text-white text-lg font-bold aspect-square w-8 h-8 flex items-center justify-center
                       transform transition-all duration-200 ease-out active:scale-95 active:shadow-inner-md active:bg-red-700 dark:active:bg-red-900">
          ✕
        </button>
      </div>

      <!-- User Profile Section -->
      <div class="flex items-center space-x-4 mb-6 relative p-3 rounded-xl bg-gray-100/50 dark:bg-neutral-800/50 shadow-inner shadow-gray-300/50 dark:shadow-neutral-900/50">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-orange-400 dark:border-orange-600 shadow-md transform rotate-1 transition-transform duration-300 hover:rotate-6">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100 text-lg">Jessica Miller</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 flex items-center">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <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>
            Public <span class="ml-2 text-xs font-mono text-gray-400 select-none dark:text-gray-500">🔒</span>
          </p>
        </div>
      </div>

      <!-- Textarea for post content -->
      <textarea placeholder="What's on your mind?" rows="5" class="w-full p-4 mb-6 rounded-lg resize-none text-gray-800 bg-gray-100 border border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 dark:text-gray-200 outline-none
                 shadow-inner-lg shadow-gray-300/50 dark:shadow-neutral-900/50
                 focus:border-blue-400 focus:ring-2 focus:ring-blue-300 dark:focus:border-blue-600 dark:focus:ring-blue-800
                 placeholder:text-gray-400 dark:placeholder:text-gray-500
                 font-sans custom-scroll-light dark:custom-scroll-dark
                 transition-all duration-300 ease-in-out"></textarea>

      <!-- Action Buttons Mimicking physical buttons -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-green-400 to-green-600 text-white font-semibold
                       shadow-lg shadow-green-500/50 dark:shadow-green-700/50 border border-green-500 dark:border-green-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-green-600 dark:to-green-800 dark:hover:from-green-500 dark:hover:to-green-700">
          <svg class="w-5 h-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-4 4 4 4-4V5h-2l-4 4-2-2-6 6z" clip-rule="evenodd"></path></svg>
          Photo
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 text-white font-semibold
                       shadow-lg shadow-blue-500/50 dark:shadow-blue-700/50 border border-blue-500 dark:border-blue-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012 14v.001A1 1 0 003 15h14a1 1 0 001-1v-.001a1 1 0 01-1.707-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
          Live
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 text-white font-semibold
                       shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 border border-purple-500 dark:border-purple-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-purple-600 dark:to-purple-800 dark:hover:from-purple-500 dark:hover:to-purple-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 016 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
          File
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-600 text-white font-semibold
                       shadow-lg shadow-yellow-500/50 dark:shadow-yellow-700/50 border border-yellow-500 dark:border-yellow-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-yellow-600 dark:to-yellow-800 dark:hover:from-yellow-500 dark:hover:to-yellow-700">
          <svg class="w-5 h-5 mr-2" 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 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
          Poll
        </button>
      </div>

      <!-- Post Button - Resembles a large, clickable physical button -->
      <button class="w-full py-4 text-2xl font-bold bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-xl text-white
                     shadow-2xl shadow-cyan-500/60 dark:shadow-cyan-700/60 border-2 border-cyan-400 dark:border-cyan-600
                     transform transition-all duration-300 ease-out hover:scale-102 active:scale-98
                     active:shadow-inner-lg active:shadow-cyan-700/70 dark:active:shadow-cyan-900/70
                     drop-shadow-lg text-shadow-lg
                     dark:from-cyan-600 dark:to-cyan-800 dark:hover:from-cyan-500 dark:hover:to-cyan-700">
        Post Now
      </button>

    </div>

    <!-- Bottom Bezel / Shadow -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-400 rounded-b-2xl opacity-75 dark:bg-neutral-800 dark:opacity-50 group-hover:h-6 transition-all duration-300 transform translate-y-1"></div>

  </div>
</div>

<style>
/* Define text shadow */
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.text-shadow-lg {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Define inner shadow utility classes */
.shadow-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.shadow-inner-sm {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.shadow-inner-lg {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
.shadow-inner-md {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Custom scrollbar for textarea */
.custom-scroll-light::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 4px;
  border: 2px solid #e0e0e0;
}

.custom-scroll-light::-webkit-scrollbar-thumb:hover {
  background: #808080;
}

/* Dark mode scrollbar */
.dark .custom-scroll-dark::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-track {
  background: #333333;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb {
  background: #666666;
  border-radius: 4px;
  border: 2px solid #333333;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

/* 3D transforms for skeuomorphism */
.perspective-1000 {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.rotateX-3 {
  transform: rotateX(3deg);
}

@media (max-width: 768px) {
  .rotateX-3,
  .group:hover .rotateX-0,
  .group:hover .translateZ-10 {
    transform: none; /* Disable 3D transforms on small screens */
  }
  .group:hover .scale-105,
  .group:hover .scale-102 {
    transform: scale(1.02); /* Slight scale on mobile hover */
  }
}

</style>

Bauhaus CAPTCHA Component

A simple, functional CAPTCHA component in Bauhaus style for documentation/wiki sites, featuring geometric forms, high contrast, full responsiveness, and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg border-2 border-black dark:border-white relative overflow-hidden">
    
    <!-- Bauhaus geometric elements -->
    <div class="absolute top-0 left-0 w-16 h-16 bg-red-500 transform -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-blue-500 transform translate-x-1/2 translate-y-1/2 -rotate-30"></div>
    <div class="absolute top-1/2 left-1/2 w-12 h-12 bg-yellow-500 z-0 transform -translate-x-1/2 -translate-y-1/2 rotate-12"></div>

    <div class="relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold mb-4 text-center dark:text-white uppercase tracking-wider">
        Are you Human?
      </h2>
      
      <p class="mb-6 text-sm text-center text-gray-700 dark:text-gray-300">
        Please click the square containing a &quot;Circle&quot;.
      </p>

      <div class="grid grid-cols-3 gap-2 mb-6">
        <!-- Example CAPTCHA grid items -->
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white transform rotate-45 group-hover:rotate-0 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 dark:ring-blue-400 group-hover:scale-110 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-2 md:w-10 md:h-2 bg-red-500 ring-2 ring-red-500 dark:ring-red-400 group-hover:w-full transition-all duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-6 h-6 md:w-8 md:h-8 border-4 border-yellow-500 dark:border-yellow-400 rounded-lg group-hover:rotate-180 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white clip-path-polygon-[50%_0%,_0%_100%,_100%_100%] group-hover:scale-105 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 border-4 border-red-500 dark:border-red-400 rounded-full group-hover:animate-spin-slow"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 relative">
            <div class="absolute inset-0 bg-yellow-500 dark:bg-yellow-400 group-hover:rotate-45 transition-transform duration-200"></div>
            <div class="absolute inset-0 bg-blue-500 dark:bg-blue-400 group-hover:-rotate-45 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full border-4 border-black dark:border-white relative">
            <div class="absolute w-2 h-2 rounded-full bg-black dark:bg-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-yellow-500 dark:bg-yellow-400 group-hover:scale-105 transition-transform duration-200"></div>
        </button>
      </div>

      <div class="flex justify-between items-center">
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-transparent text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Refresh
        </button>
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-blue-500 text-white dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

Login Form Component

A clean, code-inspired login form component with monospace fonts and cool neutral colors, suitable for marketplace platforms. Includes full responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-mono text-gray-800 dark:text-gray-200">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 space-y-6">
      <h2 class="text-2xl font-bold text-center border-b border-gray-300 dark:border-gray-600 pb-4 tracking-tight">
        <span class="text-blue-600 dark:text-blue-400">Login</span> // Marketplace
      </h2>

      <form class="space-y-4">
        <div>
          <label for="email" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
            <span class="text-blue-500 dark:text-blue-300">user@</span>email:
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="[email protected]"
            class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 text-sm placeholder-gray-400 dark:placeholder-gray-500 outline-none transition-colors duration-200"
            aria-label="Email address"
            required
          />
        </div>

        <div>
          <label for="password" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
            <span class="text-blue-500 dark:text-blue-300">pass@</span>word:
          </label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="***************"
            class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 text-sm placeholder-gray-400 dark:placeholder-gray-500 outline-none transition-colors duration-200"
            aria-label="Password"
            required
          />
        </div>

        <div class="flex items-center justify-between text-sm">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded outline-none p-1 -m-1">
            Forgot Password?
          </a>
          <div class="sr-only">Persistent Login</div>
          <label for="remember" class="flex items-center cursor-pointer">
            <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 dark:text-blue-400 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
            <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
          </label>
        </div>

        <button
          type="submit"
          class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white rounded-md font-medium text-lg tracking-wide transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800"
        >
          <span class="animate-pulse pr-1">_</span> login()
        </button>
      </form>

      <p class="text-center text-sm text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
        <span class="text-blue-600 dark:text-blue-400">//</span> Don't have an account?
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded outline-none p-1 -m-1">
          _register()
        </a>
      </p>
    </div>
  </div>
</div>

Brutalist_Dating_Navigation_Simple

A simple, brutalist-inspired navigation bar for a dating/social app, featuring high-contrast elements, warm neutrals, and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-stone-200 dark:bg-stone-900 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <div class="flex items-center space-x-2">
      <a href="#" class="font-black text-2xl tracking-tighter text-stone-900 dark:text-stone-50 uppercase border-2 border-stone-900 dark:border-stone-50 px-2 py-1 transform -rotate-3 hover:rotate-0 transition-transform duration-200 ease-out">
        <span class="text-orange-600 dark:text-orange-400">FLIRT</span>
        <span class="hidden sm:inline">NET</span>
      </a>
    </div>
    <ul class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 text-sm font-bold uppercase">
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Matches
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Explore
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Messages
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Profile
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
    </ul>
  </div>
</nav>

3D_Sidebar_Documentation_Wiki

A complex, 3D-inspired responsive sidebar component for documentation and wiki sites, using warm neutrals with full dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">

  <!-- Sidebar -->
  <aside class="w-64 bg-white dark:bg-gray-800 shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 fixed md:relative" id="sidebar">
    <div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="text-2xl font-extrabold text-gray-800 dark:text-gray-100 tracking-tight relative">
        <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-amber-400 to-amber-600 dark:from-yellow-500 dark:to-orange-700 opacity-20 rounded-lg blur-sm"></span>
        <span class="relative z-10">WikiHub</span>
      </a>
      <button onclick="document.getElementById('sidebar').classList.add('-translate-x-full')" class="md:hidden focus:outline-none text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
        <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    
    <nav class="px-4 py-6 overflow-y-auto custom-scrollbar">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" 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 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 0h6"></path></svg>
            <span class="relative z-10">Home</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" 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 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
            <span class="relative z-10">Getting Started</span>
          </a>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Core Concepts</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Introduction</span>
              </a>
            </li>
            <li>
              <a href="#" class="relative flex items-center p-2 text-amber-600 dark:text-yellow-400 bg-amber-50 dark:bg-gray-700 rounded-md font-medium shadow-sm active:bg-amber-100 dark:active:bg-gray-600">
                <span class="text-sm">Architecture Overview</span>
                <span class="absolute inset-0 border-2 border-amber-400 dark:border-yellow-600 rounded-md animate-pulse pointer-events-none opacity-50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Data Models</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">API Reference</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Guides</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Installation</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Configuration</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Deployment</span>
                <span class="ml-auto text-xs py-0.5 px-2 bg-amber-100 dark:bg-amber-800 text-amber-700 dark:text-amber-200 rounded-full font-medium shadow-inner opacity-75">New</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Resources</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Changelog</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">FAQ</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Support</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <div class="p-4 mt-auto border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="w-10 h-10 rounded-full border border-gray-200 dark:border-gray-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-out" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Documentation Admin</p>
        </div>
      </div>
      <button class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-yellow-500 transition-all duration-200 ease-in-out relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
        <svg class="mr-2 -ml-1 w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 relative z-10" 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="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"></path></svg>
        <span class="relative z-10">Logout</span>
      </button>
      
      <!-- Dark mode toggle -->
      <div class="mt-4 flex items-center justify-between text-gray-600 dark:text-gray-300">
        <label for="dark-mode-toggle" class="cursor-pointer flex items-center">
          <div class="relative">
            <input type="checkbox" id="dark-mode-toggle" class="sr-only" onchange="document.documentElement.classList.toggle('dark')">
            <div class="block bg-gray-300 dark:bg-gray-700 w-10 h-6 rounded-full"></div>
            <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform dark:translate-x-full dark:bg-gray-100"></div>
          </div>
          <span class="ml-3 text-sm">Dark Mode</span>
        </label>
      </div>

    </div>
  </aside>

  <!-- Main Content Area (Placeholder) -->
  <div class="flex-1 flex flex-col overflow-hidden relative">
    <!-- Top Bar for mobile menu button -->
    <header class="bg-white dark:bg-gray-800 shadow-sm h-16 flex items-center px-4 md:hidden border-b border-gray-200 dark:border-gray-700 relative z-30">
      <button onclick="document.getElementById('sidebar').classList.remove('-translate-x-full')" class="focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 mr-4">
        <svg class="w-6 h-6" 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>
      <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">Documentation</h1>
    </header>

    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6 lg:p-8 custom-scrollbar">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl mb-6 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-yellow-700 dark:to-orange-800 opacity-5 dark:opacity-10 rounded-lg blur-md"></div>
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Welcome to WikiHub!</h2>
        <p class="text-gray-600 dark:text-gray-300 relative z-10">Explore our comprehensive guides and documentation.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
           <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Quick Start</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Get up and running with our step-by-step installation guide.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">API Reference</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Detailed documentation for all available API endpoints.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Troubleshooting</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Solutions to common issues and frequently asked questions.</p>
        </div>
      </div>
    </main>
  </div>

  <style>
    /* Custom scrollbar for better aesthetics */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.gray.100');
      border-radius: 10px;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.gray.700');
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: theme('colors.gray.300');
      border-radius: 10px;
      border: 2px solid theme('colors.gray.100');
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: theme('colors.gray.600');
      border: 2px solid theme('colors.gray.700');
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: theme('colors.gray.400');
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: theme('colors.gray.500');
    }

    /* Dark mode toggle dot animation */
    #dark-mode-toggle:checked + div .dot {
      transform: translateX(100%);
    }
  </style>

</div>

Neumorphic_Forum_Dashboard

A simple, responsive neumorphic dashboard component with a forest/green color palette, designed for forum and community platforms, and includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-green-50 to-green-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">

    <!-- Main Neumorphic Card -->
    <div class="bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-800 dark:to-gray-700 shadow-xl shadow-green-200/50 dark:shadow-gray-950/50 rounded-3xl p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-green-800 dark:text-green-300 mb-6 text-center">Forum Dashboard</h1>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Discussions Card -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
          <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Latest Discussions</h2>
          <ul class="space-y-3">
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"New ideas for community events"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">3h ago</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"Feedback on the new forum features"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">1d ago</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"General chat about web development"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">2d ago</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- Quick Stats Card -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
          <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Community Stats</h2>
          <div class="grid grid-cols-2 gap-4">
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">1,234</p>
              <p class="text-sm text-green-700 dark:text-green-400">Total Users</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">567</p>
              <p class="text-sm text-green-700 dark:text-green-400">Active Today</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">89</p>
              <p class="text-sm text-green-700 dark:text-green-400">New Topics</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">2,456</p>
              <p class="text-sm text-green-700 dark:text-green-400">Total Posts</p>
            </div>
          </div>
        </div>

      </div>

      <!-- Call to Action / Button -->
      <div class="mt-8 text-center">
        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-green-600 group-hover:from-green-400 group-hover:to-green-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 transition-all duration-300 ease-in-out shadow-lg shadow-green-400/50 dark:shadow-green-800/50 active:shadow-inner active:shadow-green-500/50 dark:active:shadow-green-900/50">
          <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-700 dark:to-gray-600 rounded-md group-hover:from-green-400 group-hover:to-green-600 group-hover:bg-opacity-0">
            Start New Discussion
          </span>
        </button>
      </div>

    </div>

  </div>
</div>

Industrial_Candy_SearchBox

A moderately complex, responsive search box component with an industrial yet candy-colored aesthetic, designed for professional corporate websites, featuring dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden border-2 border-violet-400 dark:border-zinc-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 md:p-10 border-b-2 border-violet-300 dark:border-zinc-700 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-violet-700 dark:text-pink-400 uppercase tracking-wide">Search Portal</h2>
      <svg class="h-6 w-6 sm:h-8 sm:w-8 text-violet-500 dark:text-pink-300 transform rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </div>

    <div class="p-6 sm:p-8 md:p-10 space-y-6">
      <div class="relative">
        <input type="text" placeholder="Search for products, services, or pages..." class="w-full p-4 pl-12 pr-4 rounded-full border-2 border-pink-400 dark:border-pink-600 bg-pink-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 placeholder-violet-400 dark:placeholder-pink-400 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 transition-all duration-200 ease-in-out text-base sm:text-lg font-medium shadow-inner">
        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
          <svg class="h-6 w-6 text-pink-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <select class="w-full p-3 pl-4 rounded-lg border-2 border-green-400 dark:border-green-600 bg-green-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-200 ease-in-out text-sm sm:text-base cursor-pointer">
          <option>All Categories</option>
          <option>Solutions</option>
          <option>Industries</option>
          <option>Resources</option>
          <option>About Us</option>
        </select>
        <select class="w-full p-3 pl-4 rounded-lg border-2 border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-700 transition-all duration-200 ease-in-out text-sm sm:text-base cursor-pointer">
          <option>Latest Records</option>
          <option>Most Relevant</option>
          <option>Alphabetical A-Z</option>
          <option>Date Ascending</option>
        </select>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 sm:pt-6">
        <button class="w-full sm:w-auto px-8 py-3 rounded-full bg-violet-500 text-white dark:bg-pink-600 dark:text-white font-bold uppercase tracking-wider text-base sm:text-lg hover:bg-violet-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-4 focus:ring-violet-300 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out shadow-lg transform hover:scale-105">
          Apply Search
        </button>
        <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-700 font-semibold text-sm sm:text-base hover:bg-gray-200 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-500 transition-all duration-200 ease-in-out">
          Clear Filters
        </button>
      </div>
    </div>

    <div class="p-6 sm:p-8 md:p-10 border-t-2 border-violet-300 dark:border-zinc-700 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>Powered by <a href="#" class="text-violet-600 dark:text-pink-400 hover:underline">Corporate Solutions Inc.</a></p>
    </div>
  </div>
</div>

3D_Badge_Component

A simple, responsive 3D-inspired badge component for blog/content, featuring high-contrast colors and dark mode support.

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">
  <div class="max-w-xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

    <!-- Badge 1: Category -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-purple-500 before:to-pink-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-purple-700 dark:text-purple-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Category
      </span>
    </div>

    <!-- Badge 2: Featured -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-blue-500 before:to-green-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-blue-700 dark:text-blue-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Featured
      </span>
    </div>

    <!-- Badge 3: New -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-red-500 before:to-orange-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-red-700 dark:text-red-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        New
      </span>
    </div>

    <!-- Badge 4: Popular -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-yellow-500 before:to-lime-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-yellow-700 dark:text-yellow-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Popular
      </span>
    </div>

    <!-- Badge 5: Trending -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-cyan-500 before:to-emerald-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-cyan-700 dark:text-cyan-300
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Trending
      </span>
    </div>

    <!-- Badge 6: Draft -->
    <div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
                transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
                border border-gray-200 dark:border-gray-700
                before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-400 before:to-gray-600 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
                hover:before:opacity-100 group">
      <span class="relative z-10 px-3 py-1 text-sm font-semibold
                   text-gray-600 dark:text-gray-400
                   group-hover:text-white dark:group-hover:text-white
                   transition-colors duration-300 ease-in-out">
        Draft
      </span>
    </div>

  </div>
</div>

1 ... 6 7 8 9 10 ... 335