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
Header Component
A simple, responsive header component for a blog or content site with monochromatic styling and dark mode support, focusing on subtle microinteractions when hovering over navigation links.
Header Component
A responsive header component with dark mode support, featuring a logo, navigation links, and a call-to-action button. The design uses a dark background to reduce eye strain.
Header Component
A minimalist, flat design header component for a portfolio, featuring a responsive design with dark theme support and multiple interactive elements.