Search Components

All Components

Browse all available Tailwind CSS components

Gaming_Sidebar_Navigation_Component

A responsive sidebar navigation component for gaming websites, featuring a monospace/developer-inspired design with high contrast, dark mode support, and interactive elements. Ideal for game interfaces and community portals.

Open Preview

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

Playful Weather Gallery Component

A responsive and playful gallery component for weather or climate data, featuring rounded elements, muted colors, and dark mode support. Displays weather-related images with descriptions.

Open Preview

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

Authentication Components Component

A complex authentication component designed for industrial/manufacturing applications, featuring a monospace/developer aesthetic with ocean/blue color tones. Includes login, signup, and password reset forms, fully responsive with dark mode support.

Open Preview

                <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

A simple, responsive CAPTCHA component with an Art Deco design aesthetic, using autumn colors suitable for business/corporate websites, with dark mode support.

Open Preview

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

Password Reset Component

A complex, responsive password reset component with a monospace/developer design style, featuring a black and white color scheme with a bright accent. Designed for documentation/wiki sites, it includes dark mode support and semantic HTML.

Open Preview

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

Sidebar Navigation Component

A simple, responsive sidebar navigation component with an industrial design style, warm neutral color scheme, and dark mode support, suitable for cryptocurrency/blockchain applications.

Open Preview

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

Neumorphic Social Share Buttons - Job/Career Theme

A set of social share buttons designed with a soft neumorphic style and cheerful candy colors, suitable for job boards or career platforms. Features responsive design and dark mode support.

Open Preview

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

Progress Indicators Component

A luxury/premium style progress indicator component designed for sports/fitness applications, featuring jewel tones, sophisticated typography, and full responsiveness with dark mode support.

Open Preview

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

Cyberpunk Neo-Retro Progress Bar

A moderate complexity progress bar component with a cyberpunk, neo-retro aesthetic, dark backgrounds, and muted vintage accent colors, designed for entertainment/media platforms. It features a segmented progress display and is fully responsive with dark mode support.

Open Preview

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

Retro Social Login Component

A simple, responsive social login component with a retro/vintage 80s/90s aesthetic using a forest/green color palette. Includes dark mode support.

Open Preview

                <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

Search Components

Categories

All Components