Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Retro_Industrial_Skip_Content

Un composant de lien de style rétro/vintage pour les sites Web industriels et de fabrication, avec une esthétique des années 80/90, une palette de couleurs complémentaire (orange/sarcelle) et la prise en charge du mode sombre. Ce composant complexe comprend des éléments interactifs pour une expérience utilisateur riche.

Ouvrir Aperçu

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

Modal de médias sociaux skeuomorphe

Un composant modal skeuomorphe modérément complexe, réactif et conçu pour les interactions sur les réseaux sociaux, doté d’une palette de couleurs complémentaire et d’une prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Bauhaus CAPTCHA

Un composant CAPTCHA simple et fonctionnel dans le style Bauhaus pour la documentation/les sites wiki, avec des formes géométriques, un contraste élevé, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant du formulaire de connexion

Un composant de formulaire de connexion propre, inspiré du code, avec des polices monospace et des couleurs neutres froides, adapté aux plateformes de marché. Comprend une réactivité complète et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Une barre de navigation simple, d’inspiration brutaliste, pour une application de rencontre/sociale, avec des éléments très contrastés, des neutres chauds et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant de barre latérale réactif complexe, inspiré de la 3D, pour la documentation et les sites wiki, utilisant des neutres chauds avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <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

Un composant de tableau de bord neumorphique simple et réactif avec une palette de couleurs forêt/vert, conçu pour les plateformes de forum et de communauté, et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant de champ de recherche modérément complexe et réactif avec une esthétique industrielle mais de couleur bonbon, conçu pour les sites Web d’entreprise professionnels, avec prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant de nuage de balises

Un composant de nuage de balises réactif conçu selon les principes de Material Design, avec une palette de couleurs à contraste élevé adaptée aux tableaux de bord. Inclut la prise en charge du mode sombre et le HTML sémantique pour l’accessibilité. Des effets de survol sont inclus pour l’interactivité.

Ouvrir Aperçu

                <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="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-6 sm:mb-8 text-center">
      Popular Topics Tag Cloud
    </h2>
    <div class="flex flex-wrap justify-center gap-3 sm:gap-4 md:gap-5">

      <a href="#" class="inline-block bg-blue-600 dark:bg-blue-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-blue-700 dark:border-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        Analytics
      </a>
      <a href="#" class="inline-block bg-purple-600 dark:bg-purple-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-purple-700 dark:border-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
        Data Science
      </a>
      <a href="#" class="inline-block bg-green-600 dark:bg-green-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-green-700 dark:border-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75">
        Machine Learning
      </a>
      <a href="#" class="inline-block bg-red-600 dark:bg-red-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-red-700 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
        Reporting
      </a>
      <a href="#" class="inline-block bg-yellow-600 dark:bg-yellow-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-yellow-700 dark:border-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
        Dashboards
      </a>
      <a href="#" class="inline-block bg-teal-600 dark:bg-teal-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-teal-700 dark:border-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
        Visualization
      </a>
      <a href="#" class="inline-block bg-indigo-600 dark:bg-indigo-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-indigo-700 dark:border-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
        Big Data
      </a>
      <a href="#" class="inline-block bg-pink-600 dark:bg-pink-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-pink-700 dark:border-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
        Forecasting
      </a>
      <a href="#" class="inline-block bg-orange-600 dark:bg-orange-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-orange-700 dark:border-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        Predictive Models
      </a>
      <a href="#" class="inline-block bg-cyan-600 dark:bg-cyan-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-cyan-700 dark:border-cyan-800 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
        KPIs
      </a>
      <a href="#" class="inline-block bg-fuchsia-600 dark:bg-fuchsia-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-fuchsia-700 dark:border-fuchsia-800 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-opacity-75">
        Real-time Data
      </a>
      <a href="#" class="inline-block bg-lime-600 dark:bg-lime-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-lime-700 dark:border-lime-800 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
        Cloud Computing
      </a>
    </div>
  </div>
</div>

3D_Badge_Component

Un composant de badge simple et réactif inspiré de la 3D pour le blog/le contenu, avec des couleurs très contrastées et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Rechercher des composants

Catégories

Tous les composants