Cyberpunk Header Component
A futuristic Cyberpunk-themed header component for documentation or wiki sites. Features a dark background with vibrant neon accents (electric blue, hot pink, lime green), responsive navigation, and dark mode support.
HTML Code
<header class="bg-zinc-950 text-lime-400 border-b border-lime-600/30 shadow-lg shadow-lime-600/10 dark:bg-black dark:text-fuchsia-400 dark:border-fuchsia-600/30 dark:shadow-fuchsia-600/10">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo/Site Title -->
<a href="#" class="flex items-center space-x-2 relative group">
<svg class="w-8 h-8 text-electric-blue-400 group-hover:text-electric-blue-300 transition-colors duration-300 dark:text-hot-pink-400 dark:group-hover:text-hot-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.75 17.01M12.000000000000002 21L12 21.01M14.25 17L14.25 17.01M12 3C10.73 3 7 4.12 7 9C7 11.83 8.36 13.92 9.77 15.14C11.18 16.35 12 17.67 12 19L12 21M9 6L15 6M10 9L14 9M11 12L13 12"></path>
</svg>
<span class="font-extrabold text-2xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-electric-blue-500 group-hover:from-lime-300 group-hover:to-electric-blue-400 transition-all duration-300 dark:from-fuchsia-400 dark:to-hot-pink-500 dark:group-hover:from-fuchsia-300 dark:group-hover:to-hot-pink-400">
NEO-DOCS
</span>
<span class="absolute inset-0 bg-lime-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-lg blur-sm pointer-events-none dark:bg-fuchsia-400"></span>
</a>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span class="relative z-10">Guides</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
<a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span class="relative z-10">API Ref</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
<a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span class="relative z-10">Tutorials</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
<a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span class="relative z-10">Community</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
</nav>
<!-- Search Bar (Desktop) -->
<div class="hidden md:block relative">
<input type="text" placeholder="Search the dataverse..." class="w-56 px-4 py-2 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-full border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
<svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lime-400 dark:text-fuchsia-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<label for="menu-toggle" class="cursor-pointer">
<input type="checkbox" id="menu-toggle" class="hidden peer">
<div class="space-y-2 group peer-checked:space-y-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 peer-checked:before:translate-y-2 peer-checked:after:-translate-y-2 transition-all duration-300">
<span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
<span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
<span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
</div>
</label>
<!-- Mobile Menu Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-40 hidden peer-checked:block animate-fade-in-down">
<!-- Mobile Navigation -->
<nav class="absolute top-0 right-0 w-64 h-full bg-zinc-900 border-l border-lime-600/50 p-6 shadow-xl shadow-lime-600/30 overflow-y-auto transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-out dark:bg-black dark:border-fuchsia-600/50 dark:shadow-fuchsia-600/30">
<div class="flex justify-end mb-8">
<label for="menu-toggle" class="cursor-pointer text-lime-400 hover:text-lime-300 dark:text-fuchsia-400 dark:hover:text-fuchsia-300">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</label>
</div>
<ul class="space-y-6">
<li>
<a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span>Guides</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
</li>
<li>
<a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span>API Ref</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
</li>
<li>
<a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span>Tutorials</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
</li>
<li>
<a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
<span>Community</span>
<span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
</a>
</li>
<li>
<!-- Search Bar (Mobile) -->
<div class="relative mt-8">
<input type="text" placeholder="Search..." class="w-full px-4 py-3 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-lg border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
<svg class="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 text-lime-400 dark:text-fuchsia-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<style>
/* Custom colors for better cyberpunk feel */
.text-electric-blue-400 { color: #00e5ff; }
.text-electric-blue-300 { color: #66efff; }
.bg-electric-blue-500 { background-color: #00b8d4; }
.text-hot-pink-400 { color: #ff007f; }
.text-hot-pink-300 { color: #ff66b2; }
.bg-hot-pink-500 { background-color: #e60073; }
.text-lime-400 { color: #aeff00; }
.text-lime-300 { color: #d0ff66; }
.bg-lime-400 { background-color: #aeff00; }
/* Keyframes for mobile menu animation */
@keyframes fade-in-down {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
animation: fade-in-down 0.3s ease-out forwards;
}
</style>Related Components
E-commerce Header Component
A responsive e-commerce header component built using Tailwind CSS with Material Design principles. Features a monochromatic color scheme (shades of blue), search functionality, navigation menu, shopping cart, and user profile. The header includes depth effects like shadows and supports dark mode. The component is fully responsive with a mobile hamburger menu.
E-commerce Header Component
A responsive, vibrant, Material Design-inspired header component for e-commerce websites, featuring navigation, search, and user actions. Supports dark mode.
RetroHeaderComponent
Retro/Vintage Header Component with responsive effects and dark theme support.