Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Mentions de l’utilisateur

Un composant de mention d’utilisateur réactif pour les plateformes immobilières, avec un style de conception aquarelle / artistique avec des tons bleu océan. Comprend des éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-slate-800 dark:to-slate-950 min-h-screen font-sans">

  <!-- Component Wrapper with artistic background -->
  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl relative
              bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-wood.png')] bg-cover bg-center
              border border-blue-200 dark:border-slate-700 backdrop-blur-sm">

    <!-- Watercolor Overlay (top) -->
    <div class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-blue-900/10 dark:to-transparent opacity-60 pointer-events-none rounded-t-3xl"></div>

    <!-- Content Area -->
    <div class="relative p-4 sm:p-8 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm rounded-3xl">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-6 text-center tracking-tight leading-tight relative z-10">
        <span class="relative">
          Property Mentions
          <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full"></span>
        </span>
      </h2>

      <!-- Search/Filter Input -->
      <div class="relative mb-8 shadow-md rounded-xl overflow-hidden">
        <input type="text" placeholder="Search mentions or properties..." class="w-full p-4 pl-12 pr-4 text-lg bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-slate-200 rounded-xl
                      focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 transition-all duration-300
                      placeholder:text-blue-400 dark:placeholder:text-slate-500 border border-blue-200 dark:border-slate-700">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-blue-500 dark:text-slate-400 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Mentions Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Mention Card 1 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Maria S.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 15, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"I just saw the listing for the beachfront villa in Malibu. It's absolutely stunning! Can we schedule a viewing soon? The photos are incredible."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property1/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Beachfront Villa, Malibu</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$7,500,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 2 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/30.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">David L.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 14, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Regarding the downtown condo in NYC, are there any virtual tour options available? My client is very interested but is out of state for now."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property2/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Luxury Condo, NYC</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$2,100,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 3 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Sophia K.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 12, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Your recent blog post about investing in rental properties in Florida was incredibly insightful! I'm considering the one near Orlando. Can we connect?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property3/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Family Home, Orlando</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$480,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 4 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Michael R.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 10, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Hey, I found a promising commercial space in downtown Seattle through your platform. The details say it's perfect for a startup. Any more insights?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property4/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Commercial Loft, Seattle</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$1,200,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

      </div>

      <!-- See All Mentions Button -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white font-semibold rounded-full shadow-lg group
                       hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 transform hover:-translate-y-1">
          <svg class="w-5 h-5 mr-3 -ml-1 transform group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
          See All Mentions
        </button>
      </div>

    </div>

    <!-- Watercolor Overlay (bottom) -->
    <div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-transparent dark:to-transparent opacity-60 pointer-events-none rounded-b-3xl"></div>

  </div>
</div>

Composant de navigation collante

Une barre de navigation réactive et collante avec des effets de néon/lueur, adaptée aux plateformes d’éducation ou d’apprentissage. Dispose d’une palette de couleurs violet/violet, d’une prise en charge du mode sombre et d’éléments de menu interactifs.

Ouvrir Aperçu

                <header class="sticky top-0 z-50 bg-gradient-to-r from-purple-900 to-indigo-900 shadow-lg dark:bg-gradient-to-r dark:from-gray-900 dark:to-black backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-purple-300 drop-shadow-[0_0_5px_rgba(192,132,252,0.8)] dark:text-purple-500 dark:drop-shadow-[0_0_8px_rgba(168,85,247,0.9)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
      <a href="#" class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-300 drop-shadow-[0_0_8px_rgba(233,213,255,0.7)] dark:from-purple-400 dark:to-white dark:drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">
        EduGlow
      </a>
    </div>

    <!-- Mobile menu button -->
    <div class="md:hidden">
      <button class="text-purple-300 hover:text-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Desktop menu -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Courses
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        About Us
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
    </div>

    <!-- User Actions -->
    <div class="hidden md:flex items-center space-x-4">
      <button class="px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-900 border border-purple-500
      neon-button dark:bg-purple-800 dark:hover:bg-purple-700 dark:border-purple-700 dark:focus:ring-offset-gray-900">
        Sign In
      </button>
      <img class="h-9 w-9 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md transform hover:scale-105 transition duration-300 ease-in-out cursor-pointer drop-shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    </div>
  </nav>

  <!-- Mobile menu dropdown (hidden by default, controlled by JS in a real app) -->
  <div class="md:hidden bg-purple-900 dark:bg-gray-800 py-2 border-t border-purple-800 dark:border-gray-700">
    <div class="flex flex-col space-y-2 px-4">
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Home
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Courses
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        About Us
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Contact
      </a>
      <button class="w-full text-center px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 mt-2 neon-button dark:bg-purple-800 dark:hover:bg-purple-700">
        Sign In
      </button>
      <div class="flex justify-center mt-2">
        <img class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</header>

<style>
  /* Base for glow effects, typically handled by utilities, but for complex neon, custom CSS might be needed */
  .drop-shadow-\[0_0_5px_rgba\(192\,132\,252\,0\.8\)\] {
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.8));
  }

  .dark\:drop-shadow-\[0_0_8px_rgba\(168\,85\,247\,0\.9\)\] {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
  }

  .drop-shadow-\[0_0_8px_rgba\(233\,213\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 0.7));
  }

  .dark\:drop-shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.8\)\] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }

  .glow-effect {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.7), 0 0 12px rgba(192, 132, 252, 0.5);
    transition: all 0.3s ease-out;
    opacity: 0;
  }

  .group:hover .glow-effect {
    opacity: 1;
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
  }

  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .neon-button:hover::before {
    left: 100%;
  }

  .neon-button:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.5), inset 0 0 5px rgba(139, 92, 246, 0.3);
  }

  .glow-border {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.8);
  }

  html.dark .glow-border {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.9);
  }
</style>

360_viewer_component

Un composant de visionneuse à 360° simple et minimaliste conçu pour les plates-formes éducatives, avec des couleurs néon/électriques vives et une typographie forte, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out border-2 border-transparent dark:border-transparent dark:hover:border-electric-blue-500 relative group">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-electric-blue-500 to-lime-green-500 opacity-20 dark:from-hot-pink-500 dark:to-electric-blue-500 dark:opacity-10 rounded-lg group-hover:opacity-30 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tighter text-center sm:text-left">
        <span class="text-electric-blue-500 dark:text-hot-pink-500">360°</span> <span class="text-lime-green-500 dark:text-electric-blue-500">Explorer</span>
      </h2>

      <div class="relative w-full h-48 sm:h-64 md:h-80 lg:h-96 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden mb-6 sm:mb-8 flex items-center justify-center border-4 border-electric-blue-400 dark:border-hot-pink-400 transform hover:scale-[1.01] transition-transform duration-300">
        <!-- Placeholder for 360 image (could be an actual 360 viewer library in a real app) -->
        <img src="https://picsum.photos/800/600?random=1" alt="360-degree view placeholder" class="w-full h-full object-cover select-none filter group-hover:blur-sm transition-all duration-300">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60 text-white text-base sm:text-lg font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          Drag to rotate (Simulated)
        </div>
      </div>

      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 leading-relaxed">
        Immerse yourself in a comprehensive, interactive 360-degree view of complex structures and environments. Ideal for <span class="font-semibold text-electric-blue-600 dark:text-hot-pink-400">detailed study</span> and <span class="font-semibold text-lime-green-600 dark:text-electric-blue-400">enhanced visualization</span>.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-lime-green-500 dark:text-electric-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9v-c1.333-3.333-2.667-6.667-7-10"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Interactive Exploration</span>
        </div>
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-electric-blue-500 dark:text-hot-pink-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 7h14a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0a2 2 0 012-2h4a2 2 0 012 2m0 0a2 2 0 012 2v4m-4-2a2 2 0 01-2 2h-4a2 2 0  01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2z"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Enhanced Learning</span>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg sm:text-xl font-bold bg-electric-blue-500 dark:bg-hot-pink-500 text-white shadow-xl hover:shadow-electric-blue-400/50 dark:hover:shadow-hot-pink-400/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-electric-blue-300 dark:focus:ring-hot-pink-300 group relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-r from-lime-green-400 to-electric-blue-600 dark:from-electric-blue-400 dark:to-hot-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse-light"></span>
          <span class="relative z-10">Explore Now</span>
          <svg class="ml-2 w-5 h-5 sm:w-6 sm:h-6 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 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <style>
    /* Custom colors for neon/electric theme */
    .text-electric-blue-500 {
      color: #00eeff; /* Brighter electric blue */
    }
    .dark .text-electric-blue-500 {
      color: #00eeff;
    }
    .text-hot-pink-500 {
      color: #ff0077; /* Hotter pink */
    }
    .dark .text-hot-pink-500 {
      color: #ff0077;
    }
    .text-lime-green-500 {
      color: #aeff00; /* Vibrant lime green */
    }
    .dark .text-lime-green-500 {
      color: #aeff00;
    }
    .border-electric-blue-400 {
      border-color: #00c0e0;
    }
    .dark .border-hot-pink-400 {
      border-color: #e00060;
    }

    .bg-electric-blue-500 {
      background-color: #00eeff;
    }
    .dark .bg-hot-pink-500 {
      background-color: #ff0077;
    }

    .from-electric-blue-500 {
      --tw-gradient-from: #00eeff var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(0, 238, 255, 0) var(--tw-gradient-to-position);
    }
    .to-lime-green-500 {
      --tw-gradient-to: #aeff00 var(--tw-gradient-to-position);
    }
    .dark .from-hot-pink-500 {
      --tw-gradient-from: #ff0077 var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(255, 0, 119, 0) var(--tw-gradient-to-position);
    }
    .dark .to-electric-blue-500 {
      --tw-gradient-to: #00eeff var(--tw-gradient-to-position);
    }

    .hover\:shadow-electric-blue-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 192, 224, 0.5), 0 4px 6px -2px rgba(0, 192, 224, 0.05);
    }
    .dark .hover\:shadow-hot-pink-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(224, 0, 96, 0.5), 0 4px 6px -2px rgba(224, 0, 96, 0.05);
    }

    @keyframes pulse-light {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.8;
      }
      100% {
        opacity: 0;
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  </style>
</div>

Composant Messages de réussite

Un composant de message de réussite propre et fiable pour les organisations à but non lucratif/caritatives, utilisant une palette de couleurs violette/violette. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 border-t-4 border-purple-600 dark:border-purple-500">
    <div class="flex items-center justify-center mb-4">
      <svg class="w-16 h-16 text-purple-600 dark:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h2 class="mb-3 text-2xl font-bold text-center text-gray-800 dark:text-gray-100">Thank You for Your Support!</h2>
    <p class="mb-6 text-center text-gray-600 dark:text-gray-300">
      Your generous contribution has been successfully processed and will make a significant impact on our mission.
    </p>
    <div class="flex justify-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-purple-600 rounded-md shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600">
        <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 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>
        Back to Homepage
      </a>
    </div>
    <p class="mt-6 text-sm text-center text-gray-500 dark:text-gray-400">
      A confirmation email has been sent to your inbox. Please contact us if you have any questions.
    </p>
  </div>
</div>

Composant Lightbox d’image

Un composant de visionneuse d’images ludique et amusant pour les outils CRM/Business, avec une palette de couleurs en niveaux de gris, des éléments arrondis et une interface complexe pour la visualisation interactive des images. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 font-sans overflow-hidden">

  <!-- Sample Grid to show how lightbox might be triggered -->
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-w-7xl mx-auto mb-12 sm:mb-0">
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1025/300/200" alt="Gallery Image 1" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1026/300/200" alt="Gallery Image 2" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1027/300/200" alt="Gallery Image 3" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1028/300/200" alt="Gallery Image 4" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
  </div>

  <!-- Lightbox Overlay -->
  <div id="lightbox" class="fixed inset-0 z-50 hidden bg-black bg-opacity-70 dark:bg-opacity-80 flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 ease-in-out opacity-0" 
       style="opacity: 1;" 
       onclick="event.target === this && document.getElementById('lightbox').classList.add('hidden')">

    <!-- Lightbox Content Container -->
    <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-4 sm:p-6 w-full max-w-4xl max-h-[90vh] flex flex-col gap-4 transform scale-95 opacity-0 transition-all duration-300 ease-in-out" 
         style="opacity: 1; transform: scale(1);"
         role="dialog" aria-modal="true" aria-labelledby="lightbox-title">

      <!-- Close Button -->
      <button class="absolute -top-3 -right-3 sm:-top-4 sm:-right-4 p-3 bg-gray-900 border-4 border-white dark:border-gray-800 text-white rounded-full shadow-lg group focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 z-10" 
              aria-label="Close Lightbox" 
              onclick="document.getElementById('lightbox').classList.add('hidden')">
        <svg class="w-6 h-6 transform transition-transform group-hover:rotate-90 group-focus:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <!-- Image Section -->
      <div class="flex-none w-full h-96 sm:h-[400px] lg:h-[500px] bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden relative group">
        <img src="https://picsum.photos/id/1025/800/600" alt="Current Image" class="w-full h-full object-contain object-centers select-none" id="lightbox-img">
        
        <!-- Navigation Buttons (Overlay on image) -->
        <div class="absolute inset-0 flex items-center justify-between p-2 sm:p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <button class="p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-70" aria-label="Previous Image">
            <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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-70" aria-label="Next Image">
            <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="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>

      </div>

      <!-- Details Section -->
      <div class="flex-1 flex flex-col sm:flex-row gap-4 overflow-auto">
        <div class="flex-1">
          <h2 id="lightbox-title" class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 leading-tight">Playful Corporate HQ</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
            A vibrant and welcoming image captured during an open house event, showcasing the modern architecture and collaborative spaces within our new office building.
          </p>

          <div class="flex flex-wrap items-center gap-x-6 gap-y-3 mb-4 sm:mb-6">
            <div class="flex items-center text-gray-700 dark:text-gray-300">
              <svg class="w-5 h-5 mr-1.5 opacity-80" 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-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm font-medium">Uploaded: May 15, 2024</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-300">
              <svg class="w-5 h-5 mr-1.5 opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.816 2 12 2c5.18 0 10.265 3.552 11.54 8-.22.616-.48 1.21-.77 1.78l-1.32-1.32a.75.75 0 00-1.06 1.06l1.78 1.78a8 8 0 01-1.07 1C19.263 17.552 14.178 21 9 21c-5.18 0-10.265-3.552-11.54-8-.22-.616-.48-1.21-.77-1.78l-1.32-1.32a.75.75 0 00-1.06 1.06l1.78 1.78a8 8 0 01-1.07 1zM12 17a5 5 0 100-10 5 5 0 000 10z" clip-rule="evenodd"></path></svg>
              <span class="text-sm font-medium">Views: 1,200</span>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Uploader Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-md">
            <div>
              <strong class="block text-gray-800 dark:text-gray-200 text-sm">Uploaded by: John Doe</strong>
              <span class="text-gray-500 dark:text-gray-400 text-xs">Marketing Team</span>
            </div>
          </div>
        </div>

        <!-- Action Buttons / Tags -->
        <div class="flex-none sm:w-48 flex flex-col gap-3">
          <button class="w-full bg-gray-900 text-white py-2.5 px-4 rounded-xl shadow-md transform transition-transform hover:scale-105 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download Image
          </button>
          <button class="w-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2.5 px-4 rounded-xl shadow-md transform transition-transform hover:scale-105 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Leave Comment
          </button>
          
          <div class="mt-auto flex flex-wrap gap-2 justify-center sm:justify-start">
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Office</span>
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Architecture</span>
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Team</span>
          </div>
        </div>
      </div>

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

<!-- Just a little script for the lightbox animation - not part of the component itself -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const lightbox = document.getElementById('lightbox');
  if (lightbox) {
    lightbox.addEventListener('click', (event) => {
      if (event.target === lightbox) {
        lightbox.classList.add('hidden');
      }
    });
    
    // Observe for 'hidden' class changes to animate in/out
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') {
                const isHidden = lightbox.classList.contains('hidden');
                const content = lightbox.querySelector('div:first-of-type'); // The actual dialog content

                if (!isHidden) {
                    // Show lightbox, then apply animation classes
                    setTimeout(() => {
                        lightbox.style.opacity = '1';
                        if (content) {
                          content.style.transform = 'scale(1)';
                          content.style.opacity = '1';
                        }
                    }, 10);
                } else {
                    // Hide lightbox, apply reverse animation classes, then add 'hidden'
                    lightbox.style.opacity = '0';
                    if (content) {
                      content.style.transform = 'scale(0.95)';
                      content.style.opacity = '0';
                    }
                    setTimeout(() => {
                        // Ensure hidden is only added after transition for a smoother close
                        if (lightbox.classList.contains('hidden')) return;
                        lightbox.classList.add('hidden');
                    }, 300); // Match this with your Tailwind transition duration
                }
            }
        });
    });

    observer.observe(lightbox, { attributes: true });
  }
});
</script>

Composant d’en-tête Cyberpunk

Un composant d’en-tête futuriste sur le thème du Cyberpunk pour la documentation ou les sites wiki. Dispose d’un arrière-plan sombre avec des accents néon vibrants (bleu électrique, rose vif, vert citron), d’une navigation réactive et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <header class="bg-zinc-950 text-lime-400 border-b border-lime-600/30 shadow-lg shadow-lime-600/10 dark:bg-black dark:text-fuchsia-400 dark:border-fuchsia-600/30 dark:shadow-fuchsia-600/10">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Site Title -->
    <a href="#" class="flex items-center space-x-2 relative group">
      <svg class="w-8 h-8 text-electric-blue-400 group-hover:text-electric-blue-300 transition-colors duration-300 dark:text-hot-pink-400 dark:group-hover:text-hot-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.75 17.01M12.000000000000002 21L12 21.01M14.25 17L14.25 17.01M12 3C10.73 3 7 4.12 7 9C7 11.83 8.36 13.92 9.77 15.14C11.18 16.35 12 17.67 12 19L12 21M9 6L15 6M10 9L14 9M11 12L13 12"></path>
      </svg>
      <span class="font-extrabold text-2xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-electric-blue-500 group-hover:from-lime-300 group-hover:to-electric-blue-400 transition-all duration-300 dark:from-fuchsia-400 dark:to-hot-pink-500 dark:group-hover:from-fuchsia-300 dark:group-hover:to-hot-pink-400">
        NEO-DOCS
      </span>
      <span class="absolute inset-0 bg-lime-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-lg blur-sm pointer-events-none dark:bg-fuchsia-400"></span>
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8">
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Guides</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">API Ref</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Tutorials</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Community</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
    </nav>

    <!-- Search Bar (Desktop) -->
    <div class="hidden md:block relative">
      <input type="text" placeholder="Search the dataverse..." class="w-56 px-4 py-2 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-full border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
      <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lime-400 dark:text-fuchsia-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <label for="menu-toggle" class="cursor-pointer">
        <input type="checkbox" id="menu-toggle" class="hidden peer">
        <div class="space-y-2 group peer-checked:space-y-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 peer-checked:before:translate-y-2 peer-checked:after:-translate-y-2 transition-all duration-300">
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
        </div>
      </label>
      
      <!-- Mobile Menu Overlay -->
      <div class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-40 hidden peer-checked:block animate-fade-in-down">
        <!-- Mobile Navigation -->
        <nav class="absolute top-0 right-0 w-64 h-full bg-zinc-900 border-l border-lime-600/50 p-6 shadow-xl shadow-lime-600/30 overflow-y-auto transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-out dark:bg-black dark:border-fuchsia-600/50 dark:shadow-fuchsia-600/30">
          <div class="flex justify-end mb-8">
            <label for="menu-toggle" class="cursor-pointer text-lime-400 hover:text-lime-300 dark:text-fuchsia-400 dark:hover:text-fuchsia-300">
              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </label>
          </div>
          <ul class="space-y-6">
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Guides</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>API Ref</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Tutorials</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Community</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <!-- Search Bar (Mobile) -->
              <div class="relative mt-8">
                <input type="text" placeholder="Search..." class="w-full px-4 py-3 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-lg border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 text-lime-400 dark:text-fuchsia-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

<style>
  /* Custom colors for better cyberpunk feel */
  .text-electric-blue-400 { color: #00e5ff; }
  .text-electric-blue-300 { color: #66efff; }
  .bg-electric-blue-500 { background-color: #00b8d4; }
  .text-hot-pink-400 { color: #ff007f; }
  .text-hot-pink-300 { color: #ff66b2; }
  .bg-hot-pink-500 { background-color: #e60073; }
  .text-lime-400 { color: #aeff00; }
  .text-lime-300 { color: #d0ff66; }
  .bg-lime-400 { background-color: #aeff00; }

  /* Keyframes for mobile menu animation */
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

Brutalisme Comparaison de produits Composant

Un composant de comparaison de produits de style brutaliste conçu pour les systèmes de réservation, avec une palette de couleurs forêt/vert, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="font-mono min-h-screen bg-lime-100 text-lime-950 p-4 dark:bg-lime-950 dark:text-lime-50 font-bold">
  <div class="container mx-auto max-w-7xl border-2 border-lime-950 dark:border-lime-50 p-6 shadow-[8px_8px_0_0_rgba(27,33,16,1)] dark:shadow-[8px_8px_0_0_rgba(236,252,203,1)]">
    <h1 class="text-4xl md:text-5xl lg:text-6xl text-center mb-10 uppercase leading-none border-b-4 border-lime-950 pb-4 dark:border-lime-50">
      APPOINTMENT SELECTION MATRIX
    </h1>

    <!-- Comparison Table Header -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 mb-4 text-center border-b-2 border-lime-950 pb-2 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">FEATURE<span class="md:hidden lg:inline">S</span></div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-300 dark:bg-lime-700 uppercase transform -rotate-1 skew-x-3 shadow-md border-b-8 border-r-8 dark:border-lime-50">BASIC</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-emerald-500 text-lime-50 transform rotate-1 -skew-x-3 shadow-lg dark:bg-emerald-800 dark:text-lime-50 border-b-8 border-r-8 dark:border-lime-50">PREMIUM</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-800 text-lime-50 transform -rotate-2 skew-x-5 shadow-2xl dark:bg-lime-900 border-b-8 border-r-8 dark:border-lime-50">ELITE</div>
    </div>

    <!-- Comparison Rows -->
    <div class="space-y-4">

      <!-- Feature Row 1 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Duration</div>
        <div class="text-lg p-2 text-center">30 min</div>
        <div class="text-lg p-2 text-center">60 min</div>
        <div class="text-lg p-2 text-center">90 min</div>
      </div>

      <!-- Feature Row 2 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Consultation</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 3 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Priority Support</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 4 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Follow-up</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 5 (Image Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Resource Access</div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=1" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=2" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform -rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=3" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-5">
        </div>
      </div>

      <!-- Feature Row 6 (Avatar Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Dedicated Agent</div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
      </div>

    </div>

    <!-- Action Buttons / Prices -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center mt-8 border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">PRICE</div>
      <div class="text-center flex flex-col items-center bg-lime-300 dark:bg-lime-700 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-md transform skew-y-1">
        <span class="text-3xl lg:text-4xl">$49</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-emerald-500 text-lime-50 dark:bg-emerald-800 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-lg transform -skew-y-1">
        <span class="text-3xl lg:text-4xl">$99</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-lime-800 text-lime-50 dark:bg-lime-900 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-2xl transform skew-y-2">
        <span class="text-3xl lg:text-4xl">$149</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
    </div>

    <div class="mt-10 text-sm text-center border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <p class="mb-2">*All prices are subject to change without notice.</p>
      <p>Booking slots are limited. Secure your appointment now.</p>
    </div>

  </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant complexe et réactif d’alerte de délai d’expiration de session conçu avec un style typographique suisse / international minimal et une palette de couleurs vives Candy/Sweet, adapté aux plateformes d’emploi et de carrière. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-sans">
  <div class="w-full max-w-md mx-auto rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out bg-white dark:bg-gray-800 border-4 border-pink-500 dark:border-pink-600">
    <div class="p-6 space-y-6 md:p-8 dark:bg-gray-800">
      <div class="flex items-center justify-between">
        <h3 class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight tracking-wider uppercase">
          Session Alert
        </h3>
        <svg class="h-9 w-9 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>

      <div class="space-y-4">
        <p class="text-lg text-gray-800 dark:text-gray-200 leading-relaxed">
          Your session is about to expire. Would you like to extend it and continue browsing exciting job opportunities?
        </p>
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Remaining time: <span class="font-bold text-mint-green-600 dark:text-mint-green-400" id="countdown">01:59</span>
        </p>
      </div>

      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-2">
        <button class="flex items-center justify-center px-6 py-3 border-2 border-pink-500 bg-pink-500 hover:bg-pink-600 active:bg-pink-700 text-white dark:text-white rounded-md text-base font-semibold shadow-md transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Extend Session
        </button>
        <button class="flex items-center justify-center px-6 py-3 border-2 border-mint-green-500 text-mint-green-600 bg-transparent hover:bg-mint-green-50 active:bg-mint-green-100 dark:text-mint-green-400 dark:hover:bg-mint-green-900 dark:active:bg-mint-green-800 rounded-md text-base font-semibold shadow-md transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-mint-green-500 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3v-1m18-8V9a3 3 0 00-3-3h-2.586a1 1 0 01-.707-.293l-1.414-1.414A1 1 0 009.586 2H7a3 3 0 00-3 3v1M6 10H4a2 2 0 00-2 2v5a2 2 0 002 2h2v-7zm-2 0h2v7" />
          </svg>
          Logout
        </button>
      </div>
    </div>

    <div class="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-100 dark:border-gray-700 md:p-6">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-pink-400 dark:border-pink-500 object-cover" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Job Seeker since 2023</p>
        </div>
      </div>
      <a href="#" class="text-sm font-medium text-mint-green-600 hover:text-mint-green-700 dark:text-mint-green-400 dark:hover:text-mint-green-300 transition duration-200 ease-in-out">
        My Profile &rarr;
      </a>
    </div>
  </div>
</div>

Industrial_Travel_Progress_Bar

Un composant simple de barre de progression de style industriel pour les sites Web de voyage/tourisme, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-xl bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-300 dark:border-gray-700">
    <div class="p-4 sm:p-5 md:p-6 bg-gray-300 dark:bg-gray-700 border-b border-gray-400 dark:border-gray-600">
      <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">Your Travel Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booking steps completed</p>
    </div>

    <div class="p-4 sm:p-5 md:p-6">

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Booking Confirmation (75%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flight Selection (Complete)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
          <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="mb-4 last:mb-0">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Accommodation (50%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 50%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

    </div>
  </div>

</div>

Composant de connexion sociale

Un composant de connexion sociale simple, propre et réactif avec une palette de couleurs vert forêt, conçu pour les sites Web d’actualités et de journalisme, mettant l’accent sur la typographie et les systèmes de grille. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-colors duration-300">
    <div class="text-center">
      <h2 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-2 transition-colors duration-300">Sign In/Up</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm transition-colors duration-300">Access exclusive content and personalized news.</p>
    </div>

    <div class="space-y-3">
      <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.0003 12.723c3.309-1.01 5.922-4.103 5.922-7.857C17.9223 2.146 15.7063 0 12.9633 0c-3.15 0-5.877 2.155-5.877 4.887c0 3.754 2.613 6.847 5.922 7.857zM12.0003 18.003c-5.521 0-10.002-4.482-10.002-10.002S6.4793 0 12.0003 0s10.002 4.482 10.002 10.002-4.481 10.002-10.002 10.002zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z"/>
          <path d="M12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="M12.0003 15.002c-2.761 0-5.001-2.24-5.001-5.001s2.24-5.001 5.001-5.001 5.001 2.24 5.001 5.001-2.24 5.001-5.001 5.001zM12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="M12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="m20.916 11.23a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-15.066 0c.49.977 1.113 1.806 1.89 2.541.606-.296 1.23-.549 1.864-.757-.512-.975-1.003-2.023-1.472-3.123-.762-.02-1.525-.02-2.285 0-.249.686-.412 1.388-.512 2.09-.02.083-.027.166-.022.249zm1.312-3.136c.036-.076.07-.152.106-.226l-1.04-.602 1.455-.788c.37.52.813 1.002 1.326 1.44zm11.137-1.44l1.455.788-1.04.602c.036.074.07.15.106.226-.513-.438-.956-.92-1.326-1.44zm-7.382-2.012c.706 0 1.413 0 2.119 0-.027.702-.132 1.404-.326 2.09-.646.07-1.294.07-1.942 0-.194-.686-.299-1.388-.326-2.09zm.006 13.916c-.026-.686-.13-1.382-.322-2.07-.643-.07-1.284-.07-1.927 0-.192.688-.296 1.384-.322 2.07.703 0 1.407 0 2.571 0zm.014-4.218c-.512-.975-1.003-2.023-1.472-3.123-.633-.208-1.258-.461-1.864-.757.777.735 1.4 1.564 1.89 2.541.606.296 1.23.549 1.864.757zm4.304-.757a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-10.748-1.127c-.49-.977-1.113-1.806-1.89-2.541-.606.296-1.23.549-1.864.757.512.975 1.003 2.023 1.472 3.123.762-.02 1.525-.02 2.285 0 .249-.686.412-1.388.512-2.09.02-.083.027-.166.022-.249zm-1.312 3.136c-.036.076-.07.152-.106.226l1.04.602-1.455.788c-.37-.52-.813-1.002-1.326-1.44zm-1.096-7.348c.026.686.13 1.382.322 2.07.643.07 1.284.07 1.927 0 .192-.688.296-1.384.322-2.07-.703 0-1.407 0-2.571 0z"/>
          <circle cx="12.0003" cy="4.9997" r="2.0001"/>
           <path d="m12.0003 12.0003c-2.209 0-4.0002-1.791-4.0002-4.0002s1.791-4.0002 4.0002-4.0002 4.0002 1.791 4.0002 4.0002-1.791 4.0002-4.0002 4.0002zm0 1.9999c-.735 0-1.41-.227-1.966-.607-.556-.38-.97-.905-1.233-1.503-.984-2.247-3.926-7.65-4.524-8.818-.28-.541-.448-1.272-.448-2.027 0-2.545 1.579-4.708 3.75-5.592.518-.21.997-.331 1.478-.331h.001c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02-.823-1.077-1.488-2.264-1.996-3.528-1.036-.337-2.12-.524-3.238-.524h-.001c-3.111 0-5.836 1.776-7.202 4.364-.475.86-.777 1.83-.895 2.845-.065.556 4.398 7.57 4.962 8.528.268.455.617.848 1.024 1.178.407.33.864.582 1.354.74h-.001c.001 0 .001.001.002.001.001 0 .001.001.002.001h.001c.001 0 .001.001.002.001.001 0 .001.001.002.001l.001.001c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c-.001 0-.001-.001-.002-.001l-.001 0c-.001 0-.001 0-.002 0h-.001z" fill="currentColor"/>
           <path d="m12 0c-3.15 0-5.877 2.155-5.877 4.887 0 3.754 2.613 6.847 5.922 7.857a6.0007 6.0007 0 0 1-.045.006c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001v-.001c0-3.754-2.613-6.847-5.922-7.857zm.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z" fill="currentColor"/>
        </svg>
        Continue with Google
      </button>
      <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.78 9.388 8.718 10.375V14.06H5.443V12h3.275V9.387c0-3.23 1.957-5.021 4.877-5.021 1.397 0 2.457.25 2.79.362v2.666h-1.68C13.213 7.85 1.17 9.336 12.002 9.336l.002-.002V22.375C20.22 21.01 24 16.716 24 12c0-6.627-5.373-12-12-12z"/>
        </svg>
        Continue with Facebook
      </button>
      <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-black dark:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.002 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.717 17.098c-.295.772-.888 1.493-1.636 2.115-.747.622-1.571 1.055-2.457 1.258-2.128.48-4.29.48-6.418 0-.886-.203-1.71-.636-2.457-1.258-.748-.622-1.341-1.343-1.636-2.115-.48-1.29-.48-2.58 0-3.87.295-.772.888-1.493 1.636-2.115.747-.622 1.571-1.055 2.457-1.258 2.128-.48 4.29-.48 6.418 0 .886.203 1.71.636 2.457 1.258.748.622 1.341 1.343 1.636 2.115.48 1.29.48 2.58 0 3.87zM12.002 5.567c-1.42 0-2.825.267-4.148.802-.674.265-1.254.598-1.76.996C5.586 7.73 5.17 8.16 4.887 8.653c-.31.54-.486 1.13-.526 1.748-.04.617-.008 1.25.093 1.884-.253-.162-.485-.348-.696-.554-.21-.205-.386-.43-.532-.676-.146-.245-.25-.503-.314-.766-.064-.263-.08-1.006-.08-1.006h-.002c-1.554-1.353-2.094-1.92-2.094-1.92-.127-.13-.263-.263-.408-.398-.242-.22-.497-.432-.767-.636-.27-.204-.543-.39-.817-.558-.274-.168-.54-.316-.798-.445-.257-.13-.509-.234-.755-.314-.247-.078-.487-.135-.72-.167l-.02-.005a3.064 3.064 0 0 0-1.03-.004c-.394.02-.78.077-1.157.172-.377.094-.74.22-.984.34-.243.12-.464.26-.66.417-.197.157-.367.327-.514.498-.146.171-.266.347-.36.526-.094.18-.16-.36-.16-.36l-.001-.001c-.13-.266-.28-.52-.45-.76-.17-.24-.356-.47-.558-.69-.2-.22-.41-.428-.627-.62-.218-.19-.434-.367-.648-.53-.213-.163-.42-.31-.62-.437-.2-.127-.39-.234-.567-.32-.178-.087-.34-.15-.49-.19l-.02-.007c-.4-.05-.79-.06-1.18-.03-.39.03-.77.108-1.13.238-.36.13-.69.293-.98.487-.29.194-.546.417-.768.667-.22.25-.402.52-.54.802-.138.283-.23.578-.277.88-.046.302-.04.606.012.906.053.3.14.6.26.885.12.285.27.56.45.816.18.256.39.49.63.702.235.212.493.398.767.558.274.159.56.288.857.387.297.098.604.168.913.208.31.04.614.04.912 0 .3-.04.59-.115.86-.226.27-.11.52-.25.75-.41.23-.16.43-.34.6-.53.17-.19.31-.4.42-.61s.19-.43.23-.65l.006-.03c.09-1.282.046-2.316-.134-3.076-.138-.588-.344-1.11-.618-1.564-.275-.453-.61-.83-.988-1.127-.38-.297-.8-.51-1.25-.638-1.4-.385-2.88-.34-4.275.12-.59.19-1.18.45-1.76.75-.58.3-.98.66-1.19.99-.21.33-.28.59-.21.78.07.19.26.28.56.28.3 0 .6-.07.9-.21.3-.14.58-.33.84-.57.26-.24.52-.49.77-.75.25-.26.49-.52.7-.77.21-.25.4-.49.57-.73.18-.24.32-.47.43-.68.11-.21.18-.4.2-.56.02-.16-.01-.3-.08-.43-.07-.13-.19-.22-.36-.28-.17-.06-.39-.08-.66-.08-1.11 0-2.28.27-3.41.81-.67.32-1.3.7-1.89 1.13-.58.43-1.13.9-1.63 1.4-1.5.75-2.9 1.63-4.22 2.65-.66.5-.94.75-.84.75h-.001c.01 0 .02-.002.03-.005.04-.01.07-.02.1-.03.04-.01.07-.02.1-.03.03-.01.06-.02.09-.02.03-.01.06-.01.09-.02.03-.01.06-.01.09-.01.02 0 .04-.002.06-.002.02 0 .04-.002.06-.002.007 0 .013-.001.02-.001.002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001-.082.016-.395.045-.596.088-.857.147-1.002.327-.145.18-.08.3-.06.36.02.06.07.1.15.11.08.01.21-.01.38-.05.17-.04.37-.1.59-.19.22-.09.46-.2.72-.32.26-.12.55-.26.86-.4.31-.14.65-.29 1.02-.45 1.48-.65 3.06-1.12 4.71-1.34 2.22-.3 4.49-.03 6.64.8.44.16.86.35 1.25.59.39.23.76.51 1.1.84.34.33.64.67.9.99h.002c.08-.02.16-.04.24-.06.08-.02.16-.04.24-.05.08-.01.16-.02.24-.02.08 0 .16-.01.24-.01.08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002-.12-.01-.24-.01-.36-.01-.12 0-.24 0-.36 0-.12 0-.24-.001-.36-.001-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002c-1.144-.065-2.29-.005-3.414.185-.72.12-.22-.1-.22-.1z"/>
           <path d="M12.002 12s-1.898 3.53-2.617 4.908c-.71-1.378-2.617-4.908-2.617-4.908-.344-.658-.3-1.63.12-2.3.42-.67 1.15-1.07 1.95-1.12.8 0 1.54.45 1.95 1.12.42.67.46 1.64.12 2.3z"/>
           <ellipse cx="12.002" cy="7.417" rx="1.5" ry="1.5"/>
        </svg>
        Continue with Apple
      </button>
    </div>

    <div class="relative flex py-2 items-center">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
      <span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or continue with email</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
    </div>

    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <div class="mt-1">
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
        </div>
      </div>

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

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

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

    <div class="text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
      Not a member? <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Sign up now</a>
    </div>
  </div>
</div>

1 ... 17 18 19 20 21 ... 335

Rechercher des composants

Catégories

Tous les composants