Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Gaming_Sidebar_Navigation_Component

Un composant de navigation latéral réactif pour les sites Web de jeux, doté d’un design monospace/inspiré des développeurs avec un contraste élevé, une prise en charge du mode sombre et des éléments interactifs. Idéal pour les interfaces de jeu et les portails communautaires.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-50 font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-50">
  <div class="flex flex-col md:flex-row">
    <!-- Sidebar -->
    <div class="fixed inset-0 z-40 h-full w-64 transform -translate-x-full overflow-y-auto bg-gray-800 p-6 shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 md:relative md:w-64 md:translate-x-0" id="sidebar">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold uppercase text-green-400">// GAMING_UI</h2>
        <button class="text-gray-400 focus:outline-none md:hidden" onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <nav class="mt-10 space-y-4">
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 h-5 w-5" 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 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
          <span>// DASHBOARD</span>
        </a>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 h-5 w-5" 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="M11 4a2 2 0 10-4 0v12a2 2 0 104 0V4zm1 0a2 2 0 10-4 0v12a2 2 0 104 0V4zm0 8a2 2 0 10-4 0v4a2 2 0 104 0v-4z"></path>
          </svg>
          <span>// GAMES_LIBRARY</span>
        </a>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 h-5 w-5" 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 20h2a2 2 0 002-2V8a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V3"></path>
          </svg>
          <span>// DOWNLOADS</span>
        </a>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm-6-9a4 4 0 100-8 4 4 0 000 8zm7-2a2 2 0 11-4 0 2 2 0 014 0zM18 10a2 2 0 10-4 0 2 2 0 004 0z"></path>
          </svg>
          <span>// FRIENDS_LIST</span>
        </a>
        <div class="relative">
          <button onclick="document.getElementById('community-dropdown').classList.toggle('hidden')" class="flex w-full items-center justify-between rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
            <div class="flex items-center">
              <svg class="mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              <span>// COMMUNITY</span>
            </div>
            <svg class="h-4 w-4 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <div id="community-dropdown" class="absolute left-full top-0 ml-2 hidden w-48 rounded-md bg-gray-700 py-2 shadow-lg dark:bg-gray-800">
            <a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// FORUMS</a>
            <a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// NEWS</a>
            <a href="#" class="block px-4 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">// LIVE_STREAMS</a>
          </div>
        </div>
        <a href="#" class="flex items-center rounded-md px-3 py-2 text-gray-300 transition duration-300 ease-in-out hover:bg-green-600 hover:text-white dark:hover:bg-green-700">
          <svg class="mr-3 h-5 w-5" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
          <span>// SETTINGS</span>
        </a>
      </nav>

      <div class="mt-10 border-t border-gray-700 pt-6 text-sm text-gray-400">
        <p>// USER_PROFILE</p>
        <div class="mt-4 flex items-center">
          <img class="h-10 w-10 rounded-full border-2 border-green-500 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-3">
            <p class="font-bold text-white">_PLAYER_ONE_</p>
            <p class="text-xs text-gray-400">// ONLINE</p>
          </div>
        </div>
        <button class="mt-4 w-full rounded-md bg-red-600 px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800">
          // LOGOUT
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="ml-0 flex-1 p-6 transition-all duration-300 ease-in-out md:ml-64">
      <!-- Top Bar for mobile menu toggle -->
      <div class="mb-6 flex items-center justify-between md:hidden">
        <h1 class="text-2xl font-bold uppercase text-green-500">// CONSOLE_LOG</h1>
        <button class="text-gray-900 dark:text-gray-50 focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('-translate-x-full')">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>

      <h1 class="text-3xl font-bold uppercase text-green-500 md:block hidden">// DASHBOARD_OVERVIEW</h1>

      <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <!-- Card 1 -->
        <div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
          <h3 class="text-xl font-semibold uppercase text-blue-500">// ACTIVE_GAMES</h3>
          <p class="mt-4 text-gray-700 dark:text-gray-300">_STATUS: LOADING_GAME_DATA...</p>
          <div class="mt-4 space-y-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/19/50/50" alt="Game Icon">
              <span class="ml-3 text-gray-800 dark:text-gray-200">GAME_TITLE_XYZ // PLAYING</span>
            </div>
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/20/50/50" alt="Game Icon">
              <span class="ml-3 text-gray-800 dark:text-gray-200">ANOTHER_GAME // PAUSED</span>
            </div>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
          <h3 class="text-xl font-semibold uppercase text-red-500">// RECENT_ACTIVITY</h3>
          <ul class="mt-4 space-y-2 text-gray-700 dark:text-gray-300">
            <li><span class="text-yellow-500">_LOG:</span> GAME_XYZ achieved PLATINUM_RANK.</li>
            <li><span class="text-yellow-500">_LOG:</span> Download completed: PATCH_V1.2.</li>
            <li><span class="text-yellow-500">_LOG:</span> Joined 'ELITE_SQUAD' guild.</li>
          </ul>
        </div>

        <!-- Card 3 -->
        <div class="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
          <h3 class="text-xl font-semibold uppercase text-purple-500">// MESSAGES</h3>
          <div class="mt-4 space-y-3">
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
              <div class="ml-3">
                <p class="font-semibold text-gray-800 dark:text-gray-200">_SPECTRA_</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">"GG, well played!"</p>
              </div>
            </div>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
              <div class="ml-3">
                <p class="font-semibold text-gray-800 dark:text-gray-200">_CODE_BREAKER_</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">"New mission available."</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- No extra JS, just simple toggles managed via inline onclick for demonstration -->
<script>
  // This script is only for the sidebar toggle on small screens and dropdowns.
  // In a real application, you might use a framework or more robust JS.
  document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.getElementById('sidebar');
    const dropdownButton = document.querySelector('#community-dropdown').previousElementSibling;
    const dropdownMenu = document.getElementById('community-dropdown');

    // Close sidebar when clicking outside on mobile
    document.addEventListener('click', (event) => {
      if (!sidebar.contains(event.target) && !event.target.closest('button')) {
        if (!sidebar.classList.contains('-translate-x-full')) {
          sidebar.classList.add('-translate-x-full');
        }
      }
    });

    // Handle dropdown toggle for community
    dropdownButton.addEventListener('click', (event) => {
      event.stopPropagation(); // Prevent click from bubbling to document and closing sidebar
      dropdownMenu.classList.toggle('hidden');
      dropdownButton.querySelector('svg:last-child').classList.toggle('rotate-180');
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (event) => {
      if (!dropdownMenu.contains(event.target) && !dropdownButton.contains(event.target)) {
        dropdownMenu.classList.add('hidden');
        dropdownButton.querySelector('svg:last-child').classList.remove('rotate-180');
      }
    });
  });
</script>

Composant de galerie météo ludique

Un composant de galerie réactif et ludique pour les données météorologiques ou climatiques, avec des éléments arrondis, des couleurs sourdes et la prise en charge du mode sombre. Affiche des images liées à la météo avec des descriptions.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-6 lg:mb-8 text-center drop-shadow-lg">
      Climate Chronicles
    </h2>
    <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-3xl mx-auto">
      Explore fascinating moments and phenomena from our planet's diverse weather patterns.
    </p>

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

      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-blue-500/50 group">
        <img src="https://picsum.photos/id/1043/600/400" alt="Sunny Day" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Golden Hour Sunshine</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">A perfect end to a warm summer day, with clear skies and a gentle breeze.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h1a1 1 0 110 2H6a1 1 0 01-1-1zm5-1a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm4 1a1 1 0 011 1v1a1 1 0 11-2 0V9a1 1 0 011-1z"></path></svg>
            <span>Temperature: 28°C</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-emerald-500/50 group">
        <img src="https://picsum.photos/id/1025/600/400" alt="Rainy Day" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Tranquil Downpour</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">Gently falling rain brings life to the parched earth, a soothing natural symphony.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.727 6.42a1 1 0 00-.707-.293H15.5l.454-1.362A1 1 0 0015 4H5a1 1 0 00-.954 1.362L4.5 6.127H2.98a1 1 0 00-.707.293 1 1 0 00-.293.707v7.506a1 1 0 00.293.707 1 1 0 00.707.293h14.04a1 1 0 00.707-.293 1 1 0 00.293-.707V7.127a1 1 0 00-.293-.707zM15 14H5V6h10v8z" clip-rule="evenodd"></path></svg>
            <span>Humidity: 90%</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-purple-500/50 group">
        <img src="https://picsum.photos/id/1018/600/400" alt="Cloudy Sky" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Whispering Clouds</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">A canvas of soft clouds stretches across the sky, promising a calm day.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14 10a4 4 0 11-8 0 4 4 0 018 0z"></path><path fill-rule="evenodd" d="M7.002 9.043l-1.42 1.42a1 1 0 01-1.414 0l-1.42-1.42a1 1 0 010-1.414l1.42-1.42a1 1 0 011.414 0l1.42 1.42a1 1 0 010 1.414zM12.998 9.043l1.42-1.42a1 1 0 011.414 0l1.42 1.42a1 1 0 010 1.414l-1.42 1.42a1 1 0 01-1.414 0l-1.42-1.42a1 1 0 010-1.414zM10 3a1 1 0 00-1 1v1a1 1 0 102 0V4a1 1 0 00-1-1zM10 15a1 1 0 00-1 1v1a1 1 0 102 0v-1a1 1 0 00-1-1zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm15 0a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1z"></path></svg>
            <span>Cloud Cover: 75%</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-rose-500/50 group">
        <img src="https://picsum.photos/id/1019/600/400" alt="Foggy Morning" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Mystic Morning Mist</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">The world awakens cloaked in a serene veil of morning fog.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7 6a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zM7 14a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            <span>Visibility: Low</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-sky-500/50 group">
        <img src="https://picsum.photos/id/1/600/400" alt="Clear Sky with Mountains" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Mountain Breezes</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">Crisp air and panoramic views under an endless clear blue sky.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M6.293 6.707a1 1 0 010-1.414L9 2.586V13a1 1 0 11-2 0V6.586L4.707 9.293a1 1 0 11-1.414-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 6.586V13a1 1 0 11-2 0V6.586L6.293 6.707z" clip-rule="evenodd"></path></svg>
            <span>Wind Speed: 15 km/h</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-pink-500/50 group">
        <img src="https://picsum.photos/id/1084/600/400" alt="Sunset" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Vivid Sunset Hues</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">The sky ablaze with colors as the sun dips below the horizon.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm3 3a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V6a1 1 0 00-1-1H7z" clip-rule="evenodd"></path></svg>
            <span>UV Index: Low</span>
          </div>
        </div>
      </div>

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

Composant Composants d’authentification

Un composant d’authentification complexe conçu pour les applications industrielles/manufacturières, avec une esthétique monospace/développeur avec des tons de couleur océan/bleu. Comprend des formulaires de connexion, d’inscription et de réinitialisation de mot de passe, entièrement réactifs avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 flex items-center justify-center p-4 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 font-mono text-white text-sm">
  <div class="w-full max-w-4xl bg-blue-900/70 backdrop-blur-sm rounded-lg shadow-2xl overflow-hidden md:flex dark:bg-gray-900/70 p-6 md:p-8 border border-blue-700 dark:border-gray-700 animate-fade-in">
    
    <!-- Image Section (Left on Desktop, Top on Mobile) -->
    <div class="hidden md:flex md:w-1/2 bg-blue-950 border-r border-blue-700 dark:bg-gray-950 dark:border-gray-700 flex flex-col justify-between p-6 animate-slide-in-left">
      <div>
        <h2 class="text-3xl font-bold mb-4 text-blue-300 dark:text-gray-300">Industrial Command Center</h2>
        <p class="text-blue-200 dark:text-gray-400 leading-relaxed">
          Access your manufacturing control systems. Securely manage production lines, monitor sensor data, and optimize operational efficiency.
        </p>
        <ul class="mt-6 space-y-2 text-blue-200 dark:text-gray-400">
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Real-time Data Analytics</li>
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Secure Machine Interfacing</li>
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Global Supply Chain Management</li>
        </ul>
      </div>
      <div class="mt-8">
        <img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial machinery" class="rounded-md shadow-lg border border-blue-700 dark:border-gray-700 opacity-80 hover:opacity-100 transition-opacity duration-300">
      </div>
    </div>

    <!-- Forms Section (Right on Desktop, Bottom on Mobile) -->
    <div class="w-full md:w-1/2 p-6 md:px-10 py-8 flex flex-col justify-center animate-slide-in-right">
      <div x-data="{ currentTab: 'login' }" class="w-full">
        <div class="flex mb-6 border-b border-blue-700 dark:border-gray-700">
          <button @click="currentTab = 'login'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'login', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'login'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Login
          </button>
          <button @click="currentTab = 'signup'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'signup', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'signup'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Sign Up
          </button>
          <button @click="currentTab = 'reset'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'reset', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'reset'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Reset
          </button>
        </div>

        <!-- Login Form -->
        <form x-show="currentTab === 'login'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">System Access</h2>
          <div>
            <label for="login-username" class="block text-blue-200 dark:text-gray-400 mb-2">Username</label>
            <input type="text" id="login-username" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="login-password" class="block text-blue-200 dark:text-gray-400 mb-2">Password</label>
            <input type="password" id="login-password" placeholder="********" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-500 bg-blue-800 border-blue-600 rounded focus:ring-blue-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
              <label for="remember-me" class="ml-2 block text-blue-200 dark:text-gray-400 cursor-pointer">Remember me</label>
            </div>
            <a href="#" @click.prevent="currentTab = 'reset'" class="text-blue-300 hover:text-blue-200 dark:text-gray-400 dark:hover:text-gray-300 transition-colors duration-200">Forgot password?</a>
          </div>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Login To Terminal &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </form>

        <!-- Sign Up Form -->
        <form x-show="currentTab === 'signup'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">New User Registration</h2>
          <div>
            <label for="signup-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
            <input type="email" id="signup-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-username" class="block text-blue-200 dark:text-gray-400 mb-2">Desired Username</label>
            <input type="text" id="signup-username" placeholder="new.user" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-password" class="block text-blue-200 dark:text-gray-400 mb-2">Create Password</label>
            <input type="password" id="signup-password" placeholder="Min 8 characters" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-confirm-password" class="block text-blue-200 dark:text-gray-400 mb-2">Confirm Password</label>
            <input type="password" id="signup-confirm-password" placeholder="Repeat password" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Register Account &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </form>

        <!-- Password Reset Form -->
        <form x-show="currentTab === 'reset'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">Password Recovery</h2>
          <div>
            <label for="reset-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
            <input type="email" id="reset-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <p class="text-blue-200 dark:text-gray-400 text-xs">Enter your registered email address and we'll send you instructions to reset your password. Check your spam folder.</p>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Send Reset Link &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
          <button @click.prevent="currentTab = 'login'" class="w-full border border-blue-600 hover:border-blue-500 text-blue-300 hover:text-blue-200 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600">
            &#x2190; Back to Login
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Alpine JS for Tab Switching -->
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('authTabs', () => ({
        currentTab: 'login',
      }));
    });
  </script>

  <!-- Tailwind Typography and Custom Animations (Optional, if not already in config) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slide-in-left {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slide-in-right {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
    .animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
    .animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
  </style>
</div>

ArtDecoCaptchaComponent

Un composant CAPTCHA simple et réactif avec une esthétique Art Déco, utilisant des couleurs d’automne adaptées aux sites Web d’entreprise, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-orange-100 via-amber-200 to-yellow-200 dark:from-stone-900 dark:via-stone-800 dark:to-stone-700 p-4 font-serif">
  <div class="w-full max-w-sm bg-gradient-to-br from-amber-50 dark:from-stone-800 to-orange-100 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden
    border-4 border-amber-800 dark:border-stone-600
    transform skew-y-1 hover:skew-y-0 transition-transform duration-500 ease-in-out
    relative overflow-hidden group">

    <!-- Art Deco Top Border Effect -->
    <div class="absolute top-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-top-left">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

    <!-- Art Deco Background Pattern Simulation -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
            <rect x="5" y="5" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="100" fill="url(#artDecoPattern)"/>
      </svg>
    </div>

    <div class="art-deco-frame p-8 relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-stone-100 mb-6 text-center tracking-wider uppercase drop-shadow-md group-hover:scale-105 transition-transform duration-300">
        Verification Required
      </h2>

      <div class="mb-6 text-center">
        <p class="text-sm text-lime-950 dark:text-stone-300 mb-4">Please verify you are not a robot.</p>
        <div class="w-48 h-20 bg-gradient-to-r from-amber-200 to-orange-300 dark:from-stone-700 dark:to-stone-600 rounded drop-shadow-lg mx-auto flex items-center justify-center
          border-2 border-amber-700 dark:border-stone-500
          transform rotate-1 skew-x-2 group-hover:rotate-0 group-hover:skew-x-0 transition-transform duration-500 ease-in-out animate-pulse-slight">
          <span class="text-3xl font-extrabold text-amber-800 dark:text-orange-300 tracking-widest select-none leading-none">A2k9X</span>
        </div>
        <button class="mt-4 text-xs text-amber-700 dark:text-stone-400 hover:text-amber-900 dark:hover:text-stone-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <i class="fas fa-sync-alt mr-1"></i> Regenerate Code
        </button>
      </div>

      <div class="mb-6 relative">
        <label for="captchaInput" class="sr-only">Enter CAPTCHA Code</label>
        <input type="text" id="captchaInput" placeholder="Enter code" class="block w-full px-4 py-3 rounded-md text-base bg-amber-50 dark:bg-stone-700 text-lime-950 dark:text-stone-200
          border-2 border-amber-600 dark:border-stone-500 placeholder-amber-400 dark:placeholder-stone-400
          focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-50 dark:focus:ring-opacity-50
          transition-all duration-300 ease-in-out shadow-inner
          transform group-hover:-translate-y-0.5 group-hover:scale-[1.01]">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none ">
          <svg class="h-5 w-5 text-amber-500 dark:text-stone-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.5 9V7a3.5 3.5 0 017 0v2h.5a2 2 0 012 2v5a2 2 0 01-2 2h-9a2 2 0 01-2-2v-5a2 2 0 012-2h.5zM8 7a1.5 1.5 0 013 0v2H8V7zm0 6a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>

      <button type="submit" class="w-full py-3 rounded-md text-lg font-semibold
        bg-amber-800 hover:bg-amber-900 dark:bg-stone-600 dark:hover:bg-stone-700
        text-white dark:text-stone-100 shadow-xl
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95
        focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-60 dark:focus:ring-opacity-60
        border-b-4 border-r-4 border-amber-900 dark:border-stone-800 drop-shadow-lg">
        Submit
      </button>
    </div>

    <!-- Art Deco Bottom Border Effect -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-bottom-right">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe complexe et réactif avec un style de conception monospace/développeur, avec une palette de couleurs noir et blanc avec un accent vif. Conçu pour la documentation/les sites wiki, il inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

                <div class="min-h-screen bg-neutral-50 font-mono text-gray-900 flex items-center justify-center p-4 sm:p-6 dark:bg-zinc-950 dark:text-gray-100">
  <div class="w-full max-w-md bg-stone-100 border border-neutral-300 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl dark:bg-zinc-900 dark:border-zinc-800">
    <div class="flex flex-col md:flex-row">
      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-2/5 md:flex md:flex-col md:justify-between dark:bg-zinc-800 dark:border-r dark:border-zinc-700">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-emerald-600 dark:text-emerald-400">//RESET_PASSWORD</h2>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-emerald-700 dark:text-emerald-500">&gt;</span> Enter your registered email address.
          </p>
          <p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
            <span class="text-red-600 dark:text-red-400">!</span> A password reset link will be sent to your inbox. Check your spam folder if necessary.
          </p>
        </div>
        <div class="mt-8 md:mt-0">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> System uptime: <span class="text-gray-700 dark:text-gray-300">234d 12h 34m 56s</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400">&gt;</span> Logged in as: <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
          </p>
        </div>
      </div>

      <div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-3/5 border-t border-neutral-300 md:border-t-0 md:border-l dark:border-zinc-800">
        <form class="space-y-6">
          <div>
            <label for="email" class="block text-xs font-medium text-gray-700 uppercase tracking-wider mb-1 dark:text-gray-300">
              user@domain:~$ _
            </label>
            <input
              type="email"
              id="email"
              name="email"
              autocomplete="email"
              required
              placeholder="[email protected]"
              class="appearance-none block w-full px-3 py-2 border border-gray-400 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-100 dark:placeholder-gray-400"
            />
          </div>

          <div class="flex items-start">
            <div class="flex items-center h-5">
              <input
                id="terms"
                name="terms"
                type="checkbox"
                class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-400 rounded dark:bg-zinc-700 dark:border-zinc-600"
              />
            </div>
            <div class="ml-3 text-sm">
              <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
                <span class="text-emerald-600 dark:text-emerald-400">[</span> I understand this action <span class="text-red-700 dark:text-red-500">cannot be undone</span> <span class="text-emerald-600 dark:text-emerald-400">]</span>
              </label>
            </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-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600"
            >
              <span class="">EXECUTE_RESET_COMMAND</span>
              <span class="ml-2 text-white/50 dark:text-white/40">$PWD_RESET</span>
            </button>
          </div>

          <div class="text-center">
            <a href="#" class="text-sm text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
              <span class="text-emerald-600 dark:text-emerald-400">&lt;</span> Go back to login screen
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Composant de navigation dans la barre latérale

Un composant de navigation latéral simple et réactif avec un style de design industriel, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux applications de crypto-monnaie/blockchain.

Ouvrir Aperçu

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

  <!-- Desktop/Tablet Sidebar -->
  <aside class="hidden md:flex flex-col w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-md transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600">
      <span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
    </div>
    <nav class="flex-1 p-4 overflow-y-auto">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
            <span class="text-sm font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
            <span class="text-sm font-medium">Wallets</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
            <span class="text-sm font-medium">Trades</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
            <span class="text-sm font-medium">Market</span>
          </a>
        </li>
         <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98Zm-5.32 8.5a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"><!-- Placeholder Icon --></path></svg>
            <span class="text-sm font-medium">Analytics</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-sm font-medium">Settings</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="p-4 border-t border-gray-300 dark:border-zinc-700">
      <div class="flex items-center mb-2">
        <img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
      </div>
      <button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
        <svg class="w-4 h-4 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
        Sign Out
      </button>
    </div>
  </aside>

  <!-- Main Content Area - Placeholder for context -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6">Dashboard Overview</h1>
    <p class="text-gray-700 dark:text-gray-300">Welcome to your CryptoDeck dashboard. Use the sidebar to navigate.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Wallet Balance</h2>
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-50">$12,345.67</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">+2.5% in last 24h</p>
      </div>
      <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Recent Transactions</h2>
        <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
          <li>BTC Buy: +0.01 ($450)</li>
          <li>ETH Sell: -0.5 ($1200)</li>
          <li>ADA Staked: +100</li>
        </ul>
      </div>
      <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Market Trends</h2>
        <img class="w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Market Trend Chart">
      </div>
    </div>
  </main>

  <style>
    /* This is a simple toggle emulation for demonstration. 
       In a real app, use JS to toggle 'dark' class on 'html' or 'body'. */
    .dark-mode-toggle {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      background-color: #fca5a5; /* Example: light-red-300 */
      color: black;
      padding: 0.5rem 1rem;
      border-radius: 9999px; /* Full rounded */
      cursor: pointer;
      z-index: 1000;
      font-size: 0.875rem;
      line-height: 1.25rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      border: 1px solid #dc2626; /* Example: Red-600 */
    }
    .dark .dark-mode-toggle {
      background-color: #6d28d9; /* Example: Violet-700 */
      color: white;
      border-color: #8b5cf6; /* Example: Violet-500 */
    }

     /* Mobile menu button animation */
    .mobile-menu-button.active svg:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .mobile-menu-button.active svg:nth-child(2) {
      opacity: 0;
    }
    .mobile-menu-button.active svg:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

     @media (max-width: 767px) {
      .mobile-menu-container {
        transform: translateX(-100%);
      }
      .mobile-menu-container.open {
        transform: translateX(0);
      }
    }
  </style>

  <!-- Mobile Menu Button - Fixed bottom left -->
  <button aria-label="Toggle Mobile Menu" class="md:hidden fixed bottom-4 left-4 p-3 bg-gray-300 dark:bg-gradient-to-br dark:from-zinc-700 dark:to-zinc-900 text-gray-800 dark:text-gray-100 rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out border border-gray-400 dark:border-zinc-700 mobile-menu-button">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
  </button>

  <!-- Mobile Sidebar (Off-canvas) -->
  <div class="mobile-menu-container fixed inset-y-0 left-0 w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-xl z-40 transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out" role="dialog" aria-modal="true" aria-label="Mobile Navigation">
    <div class="flex items-center justify-between h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600 px-4">
      <span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
      <button aria-label="Close Menu" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 mobile-menu-close-button">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
    <nav class="flex-1 p-4 overflow-y-auto">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
            <span class="text-sm font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
            <span class="text-sm font-medium">Wallets</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group active:bg-gray-400 dark:active:bg-zinc-600">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
            <span class="text-sm font-medium">Trades</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
            <span class="text-sm font-medium">Market</span>
          </a>
        </li>
         <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM5.32 8.5a.5.5 0 00-.707.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"/></svg>
            <span class="text-sm font-medium">Analytics</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
            <svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-sm font-medium">Settings</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="p-4 border-t border-gray-300 dark:border-zinc-700">
      <div class="flex items-center mb-2">
        <img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
      </div>
      <button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
        <svg class="w-4 h-4 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
        Sign Out
      </button>
    </div>
  </div>

  <!-- Overlay for mobile menu -->
  <div class="overlay fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>

  <script>
    // Basic JavaScript for toggling dark mode (for demonstration)
    const toggleDarkMode = () => {
      document.documentElement.classList.toggle('dark');
    };

    // Add a button to toggle dark mode (for demo purposes)
    document.addEventListener('DOMContentLoaded', () => {
      const darkToggleBtn = document.createElement('button');
      darkToggleBtn.className = 'dark-mode-toggle';
      darkToggleBtn.textContent = 'Toggle Dark Mode';
      darkToggleBtn.onclick = toggleDarkMode;
      document.body.appendChild(darkToggleBtn);

      // Mobile menu functionality
      const mobileMenuButton = document.querySelector('.mobile-menu-button');
      const mobileMenuContainer = document.querySelector('.mobile-menu-container');
      const mobileMenuCloseButton = document.querySelector('.mobile-menu-close-button');
      const overlay = document.querySelector('.overlay');

      const openMenu = () => {
        mobileMenuContainer.classList.add('open');
        overlay.classList.remove('hidden');
      };

      const closeMenu = () => {
        mobileMenuContainer.classList.remove('open');
        overlay.classList.add('hidden');
      };

      mobileMenuButton.addEventListener('click', openMenu);
      mobileMenuCloseButton.addEventListener('click', closeMenu);
      overlay.addEventListener('click', closeMenu);

      // Close menu on desktop resize if open
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768 && mobileMenuContainer.classList.contains('open')) {
          closeMenu();
        }
      });
    });
  </script>
</div>

Boutons de partage social Neumorphic - Thème Emploi/Carrière

Un ensemble de boutons de partage social conçus avec un style neumorphique doux et des couleurs bonbon gaies, adaptés aux sites d’emploi ou aux plateformes de carrière. Dispose d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-6 sm:p-8 md:p-10 bg-[#e0e5ec] dark:bg-[#2c2f33] min-h-screen flex items-center justify-center font-sans">
  <div class="p-6 rounded-3xl shadow-xl dark:shadow-md transition-all duration-300 transform bg-[#e0e5ec] dark:bg-[#34373b] max-w-lg w-full
              shadow-[inset_7px_7px_15px_#bebebe,inset_-7px_-7px_15px_#ffffff]
              dark:shadow-[inset_7px_7px_15px_#272a2e,inset_-7px_-7px_15px_#41454c]">

    <h2 class="text-center text-2xl sm:text-3xl font-bold mb-6 text-[#6a6a6a] dark:text-[#a0a0a0]">Share This Opportunity!</h2>

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">

      <!-- LinkedIn Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#0A66C2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">LinkedIn</span>
      </button>

      <!-- Twitter Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#1DA1F2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.447 0-6.227 2.78-6.227 6.228 0 .486.052.958.156 1.41-.519-.026-1.02-.13-1.498-.291-5.185-2.618-8.714-8.243-9.041-9.982-.574-.291-1.127-.477-1.645-.555-.175.71.076 1.343.344 1.83 1.13 1.942 3.197 4.195 6.25 5.86-1.785.426-3.599.664-5.467.664-.813 0-1.605-.074-2.373-.218-1.928-1.18-.737-3.08-1.641-3.415-.828-1.096-1.157-2.327-.923-3.031.956.408 2.016.634 3.13.634.502 0 .991-.064 1.463-.195 1.77-.478 3.013-1.643 3.42-3.045.399-1.396.115-2.906-.838-3.955-1.077-1.2-2.79-1.93-4.66-1.93-2.043 0-3.513 1.05-4.2 2.37-.504.996-.757 2.083-.757 3.245 0 1.2.228 2.348.683 3.393.425 1.002.99 1.89 1.672 2.628 3.535 3.738 8.016 6.012 12.607 6.012 3.824 0 7.37-1.385 9.948-3.57 1.042-2.146 1.62-4.526 1.62-7.05v-.268c.843-.687 1.564-1.547 2.142-2.502z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Twitter</span> 
      </button>

      <!-- Facebook Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#1877F2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.248-1.333 1.172-1.333h2.828v-5h-3.964c-3.344 0-4.036 2.338-4.036 4.622v1.378z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Facebook</span>
      </button>

      <!-- Email Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#EA4335] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M0 3v18h24v-18h-24zm6.623 7.929l-6.623 5.671v-11.52zm11.377 5.671l-6.623-5.671 6.623-5.671v11.342zm-12.87-9.521l-3.38 2.901 3.38 3.598v-6.499zm16.75 6.499v-3.598l3.38-2.901-3.38-3.598z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Email</span>
      </button>

      <!-- WhatsApp Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#25D366] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.39-3.901-.767-6.183 1.055-3.824 4.398-6.529 8.3-6.529 3.901 0 7.244 2.705 8.3 6.529.624 2.282.275 4.379-1.041 6.183l1.687 6.163-6.334-1.993c-1.854 1.066-3.975 1.636-6.196 1.636-4.996 0-9.064-4.064-9.064-9.064s4.068-9.064 9.064-9.064c4.996 0 9.064 4.064 9.064 9.064h-3c0-3.323-2.677-6-6-6-3.323 0-6 2.677-6 6s2.677 6 6 6c1.118 0 2.164-.309 3.068-.846l-1.068-.337 1.687 6.163zm-4.322-14.773c-1.393-.574-2.955-.87-4.593-.87-3.901 0-7.244 2.705-8.3 6.529-.624 2.282-.275 4.379 1.041 6.183l1.687 6.163 6.334-1.993c1.854 1.066 3.975 1.636 6.196 1.636 4.996 0 9.064-4.064 9.064-9.064s-4.068-9.064-9.064-9.064c-3.901 0-7.244 2.705-8.3 6.529z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">WhatsApp</span>
      </button>

    </div>

    <p class="text-center text-sm font-light mt-6 text-[#9ca3af] dark:text-[#6b7280]">Help a friend find their next big career move!</p>

  </div>

  <style>
    .neumorphic-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      border-radius: 1.5rem; /* 24px */
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      background-color: #e0e5ec;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
      text-decoration: none;
    }

    .neumorphic-button:hover {
      background-color: #e8edff;
      transform: translateY(-2px);
      box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
    }

    .neumorphic-button:active {
      box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
      transform: translateY(1px);
    }

    /* Dark Mode Styles */
    html.dark .neumorphic-button {
      background-color: #34373b;
      box-shadow: 7px 7px 15px #272a2e, -7px -7px 15px #41454c;
    }

    html.dark .neumorphic-button:hover {
      background-color: #3b3e42;
      box-shadow: 5px 5px 10px #272a2e, -5px -5px 10px #41454c;
    }

    html.dark .neumorphic-button:active {
      box-shadow: inset 5px 5px 10px #272a2e, inset -5px -5px 10px #41454c;
    }
  </style>
</div>

Volet Indicateurs de progrès

Un composant d’indicateur de progression de style luxe/premium conçu pour les applications de sport/fitness, avec des tons de bijoux, une typographie sophistiquée et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 shadow-xl rounded-2xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-stone-700 transform hover:scale-[1.02] transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
      Athlete Performance Overview
    </h2>
    <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-2xl mx-auto opacity-90">
      Track key metrics and visualize progress towards your fitness goals with elegant precision.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-8 sm:gap-x-12 lg:gap-x-16">

      <!-- Metric 1: Endurance Progress -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-sapphire-600 dark:text-sapphire-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.75))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-sapphire-700 dark:text-sapphire-300">75%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Endurance</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Achieved 75% of your aerobic fitness target.</p>
      </div>

      <!-- Metric 2: Strength Level -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-ruby-600 dark:text-ruby-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.88))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-ruby-700 dark:text-ruby-300">88%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Strength</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Reached 88% of your personal strength record.</p>
      </div>

      <!-- Metric 3: Recovery Status -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Recovery Score</h3>
        <div class="w-full max-w-sm bg-gray-200 dark:bg-stone-700 rounded-full h-8 sm:h-10 mb-4 overflow-hidden shadow-inner">
          <div class="bg-emerald-500 dark:bg-emerald-300 h-full rounded-full transition-all duration-700 ease-out flex items-center justify-end pr-3"
            style="width: 92%;">
            <span class="text-white dark:text-stone-900 text-sm font-semibold">92%</span>
          </div>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-lg">Excellent recovery; ready for optimal performance.</p>
      </div>

      <!-- Metric 4: Goal Completion -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Overall Goal Completion</h3>
        <div class="flex items-center space-x-4 mb-4">
          <div class="relative w-28 h-28 sm:w-32 sm:h-32">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Athlete Avatar" class="w-full h-full rounded-full object-cover border-4 border-emerald-500 dark:border-emerald-300 shadow-lg">
            <span class="absolute bottom-0 right-0 bg-emerald-500 dark:bg-emerald-300 rounded-full p-1 border-2 border-white dark:border-stone-800">
              <svg class="w-6 h-6 text-white dark:text-stone-900 icon-check" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </span>
          </div>
          <div class="flex-1">
            <p class="text-3xl sm:text-4xl font-extrabold text-ruby-600 dark:text-ruby-400">+
              <span class="counter" data-count="12">12</span> Workouts This Week
            </p>
            <p class="text-lg text-gray-600 dark:text-gray-400">Exceeding weekly target of 10.</p>
          </div>
        </div>
        <div class="w-full flex justify-center mt-6">
          <button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold rounded-full text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-400 dark:focus:ring-emerald-700 active:scale-95">
            View Detailed Report
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<style>
  /* Custom properties for jewel tones */
  .text-sapphire-600 { color: #2B6CB0; } /* Tailwind blue-700 for example */
  .dark\:text-sapphire-400 { color: #63B3ED; } /* Tailwind blue-400 */
  .text-ruby-600 { color: #E53E3E; } /* Tailwind red-600 */
  .dark\:text-ruby-400 { color: #FC8181; } /* Tailwind red-400 */
  .text-emerald-700 { color: #047857; } /* Tailwind emerald-700 */
  .dark\:text-emerald-400 { color: #34D399; } /* Tailwind emerald-400 */
  .bg-emerald-500 { background-color: #10B981; } /* Tailwind emerald-500 */
  .dark\:bg-emerald-300 { background-color: #6EE7B7; } /* Tailwind emerald-300 */

  /* If you want specific custom jewel tones */
  /*
  .text-sapphire-600 { color: #0F4C81; }
  .dark\:text-sapphire-400 { color: #5B9BD5; }
  .text-ruby-600 { color: #9C1943; }
  .dark\:text-ruby-400 { color: #E03B87; }
  .text-emerald-700 { color: #007A4D; }
  .dark\:text-emerald-400 { color: #3DCC91; }
  .bg-emerald-500 { background-color: #00B06B; }
  .dark\:bg-emerald-300 { background-color: #72E0AF; }
  */

  /* Animation for circular progress */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
  }

  /* Counter animation (requires JS for actual counting, but static HTML shows final state) */
  /* For dynamic effect, a small JS snippet would be needed outside the scope of this task. */
  /* Example of how a JS counter might be initialized: */
  /*
  document.querySelectorAll('.counter').forEach(counter => {
    const updateCount = () => {
      const target = +counter.getAttribute('data-count');
      const count = +counter.innerText;

      const increment = target / 200;

      if (count < target) {
        counter.innerText = Math.ceil(count + increment);
        setTimeout(updateCount, 1);
      } else {
        counter.innerText = target;
      }
    };
    updateCount();
  });
  */
</style>

Barre de progression néo-rétro cyberpunk

Un composant de barre de progression de complexité modérée avec une esthétique cyberpunk et néo-rétro, des arrière-plans sombres et des couleurs d’accent vintage discrètes, conçu pour les plateformes de divertissement/médias. Il dispose d’un affichage de progression segmenté et est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-[#1a1a2e] dark:bg-gray-900 min-h-screen flex items-center justify-center font-mono text-gray-200">
  <div class="w-full max-w-2xl bg-[#0f0f20] dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-[#00f7ff33] dark:border-gray-700">
    <div class="p-4 sm:p-6 md:p-8 relative">
      <div class="text-lg sm:text-xl md:text-2xl font-bold text-[#00f7ff] dark:text-[#a0a0ff] mb-4 sm:mb-6 uppercase tracking-wider before:content-[''] before:absolute before:left-0 before:top-0 before:w-1 before:h-full before:bg-[#00f7ff]">Now Playing: Interstellar Echoes</div>
      <p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8">Track 3 of 12 - Dreamscape Protocol</p>

      <!-- Progress Bar Container -->
      <div class="w-full bg-[#3c3c5a] dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative mb-4 sm:mb-6">
        <div class="absolute top-0 left-0 h-full rounded-full transition-all duration-500 ease-out"
             style="width: 65%; background-color: #ff5757; box-shadow: 0 0 8px #ff5757, 0 0 16px #ff5757;"
             aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar">
        </div>
        <div class="absolute top-0 left-1/3 w-1 bg-gray-500 rounded-full h-full"></div>
        <div class="absolute top-0 left-2/3 w-1 bg-gray-500 rounded-full h-full"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs sm:text-sm text-gray-400 mb-6 sm:mb-8">
        <span class="text-[#ff5757]">02:45</span>
        <span>04:10</span>
      </div>

      <!-- Control Buttons -->
      <div class="flex justify-center items-center space-x-6 sm:space-x-8 text-xl sm:text-2xl">
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Previous Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-full p-2 sm:p-3 border border-[#82e0ff] dark:border-[#c0c0ff] hover:border-[#00f7ff] dark:hover:border-[#a0a0ff] shadow-md shadow-[#82e0ff]/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.125l-3.359-3.359A.858.858 0 0010 8.358v7.284a.858.858 0 001.393.616l3.359-3.359a.858.858 0 00-.001-1.234zM12 21a9 9 0 110-18 9 9 0 010 18z" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Next Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Composant de connexion sociale rétro

Un composant de connexion sociale simple et réactif avec une esthétique rétro/vintage des années 80/90 utilisant une palette de couleurs forêt/vert. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex min-h-screen items-center justify-center bg-lime-100 p-4 font-mono dark:bg-gray-900">
  <div class="w-full max-w-sm rounded-lg border-4 border-lime-700 bg-gradient-to-br from-lime-200 to-lime-50 perspective-1000 p-6 shadow-[8px_8px_0px_rgba(30,64,17,0.7)] transition-all duration-300 hover:shadow-[12px_12px_0px_rgba(30,64,17,0.8)] dark:border-emerald-600 dark:from-gray-800 dark:to-gray-700 dark:shadow-[8px_8px_0px_rgba(6,78,59,0.7)] dark:hover:shadow-[12px_12px_0px_rgba(6,78,59,0.8)]">
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-bold uppercase text-lime-800 dark:text-emerald-400">Plug In!</h2>
      <span class="text-xl text-lime-600 dark:text-emerald-500">💾</span>
    </div>
    <div class="space-y-4">
      <button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
        <img src="https://www.svgrepo.com/show/512317/chrome.svg" alt="Google logo" class="h-6 w-6 filter invert dark:filter-none" />
        Login with Google
      </button>
      <button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
        <img src="https://www.svgrepo.com/show/448206/apple.svg" alt="Apple logo" class="h-6 w-6 filter invert dark:filter-none" />
        Login with Apple
      </button>
      <button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
        <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70add2fce7_580b57fcd9996e24bc43c513.png" alt="Facebook logo" class="h-6 w-6 dark:filter invert" />
        Login with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-sm text-lime-700 dark:text-emerald-300">
      <p>Don't have an account? <a href="#" class="font-bold underline hover:text-lime-900 dark:hover:text-emerald-500">Register Now!</a></p>
    </div>
  </div>
</div>

1 ... 77 78 79 80 81 ... 335

Rechercher des composants

Catégories

Tous les composants