Komponenten Navigationsleiste Cyberpunk_Finance_Navbar

Cyberpunk_Finance_Navbar

Eine einfache, reaktionsschnelle Navigationsleiste im Cyberpunk-Stil für Finanz-/Bankanwendungen mit dunklem Hintergrund, hellen Farbverlaufsakzenten und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

<nav class="bg-neutral-950 dark:bg-black font-mono text-white p-4 shadow-lg shadow-purple-500/20">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo/Brand Name -->
    <div class="text-2xl font-bold bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text drop-shadow-[0_0_8px_rgba(255,0,255,0.7)]">
      CYBERBANK
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button id="menu-toggle" class="text-white focus:outline-none focus:ring-2 focus:ring-purple-500 p-2 rounded-md">
        <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>
    </div>

    <!-- Navigation Links -->
    <div id="mobile-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8 mt-4 md:mt-0">
      <a href="#" class="text-lg relative hover:text-purple-400 transition-colors duration-300 group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-purple-500 to-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-green-400 transition-colors duration-300 group">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-green-500 to-cyan-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-orange-400 transition-colors duration-300 group">
        Payments
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-orange-500 to-red-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-yellow-400 transition-colors duration-300 group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-yellow-500 to-pink-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-cyan-400 transition-colors duration-300 group">
        Support
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-cyan-500 to-purple-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </div>

  <!-- Simple JS for Mobile Menu Toggle (not part of the HTML component, but for demonstration) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', function() {
          mobileMenu.classList.toggle('hidden');
          mobileMenu.classList.toggle('flex');
          mobileMenu.classList.toggle('flex-col');
        });
      }
    });
  </script>
</nav>

Verwandte Komponenten

Komponente der Navigationsleiste

Eine reaktionsschnelle Navigationsleiste für eine E-Commerce-Website mit einem Glassmorphism-Designstil mit einem Graustufen-Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Minimalistische Navigationsleiste

Eine reaktionsschnelle Navigationsleistenkomponente in einem minimalistischen Stil, die ein dunkles Design unterstützt und Tailwind CSS verwendet.

Offen

LuxusTravelNavBar

Eine einfache, elegante Navigationsleistenkomponente für Reise- und Tourismus-Websites mit luxuriösen Erdtönen, responsivem Design und Unterstützung für den Dunkelmodus.

Offen