Tailwind Navigation (Horizontal) Components in Cyber library

<nav class="relative px-10 py-8 bg-gradient-to-br from-black via-gray-950 to-black border-b border-blue-400 border-opacity-20 scan-lines" x-data="{ mobileNavOpen: false }">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-4 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-6 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-4 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-6 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="flex justify-between items-center relative z-10">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <title>Mobile menu</title>
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:items-center lg:w-auto lg:space-x-12">
                <li><a class="text-sm text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    ABOUT
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm text-gray-50 hover:text-purple-500 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    COMPANY
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm text-gray-50 hover:text-green-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    SERVICES
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    TESTIMONIALS
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
            </ul>
            <div class="hidden lg:flex relative hologram-effect">
                <input class="inline-block px-4 py-3 text-sm text-blue-400 placeholder-blue-400 font-semibold bg-gray-950 border-2 border-blue-400 border-opacity-30 rounded-l bg-opacity-50 focus:outline-none focus:border-blue-400 focus:animate-pulse-neon transition-all duration-300" placeholder="SEARCH QUERY">
                <button class="px-4 rounded-r bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 transition-all duration-300 transform hover:scale-105">
                    <svg class="text-gray-950 w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>
                </button>
            </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
            <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-950 bg-opacity-90 backdrop-blur-sm"></div>
            <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-gradient-to-b from-gray-800 to-gray-950 border-r-2 border-blue-400 overflow-y-auto">
                <div class="flex items-center mb-12">
                    <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                        <img src="cyber-assets/logo.png" alt="" class="h-4">
                    </a>
                    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="ml-auto text-blue-400 hover:text-purple-500 transition-colors duration-300">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div>
                    <ul class="space-y-2">
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-blue-400 hover:bg-opacity-10 hover:text-blue-400 transition-all duration-300 border-l-4 border-transparent hover:border-blue-400 tracking-wider" href="#">ABOUT</a></li>
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-purple-500 hover:bg-opacity-10 hover:text-purple-500 transition-all duration-300 border-l-4 border-transparent hover:border-purple-500 tracking-wider" href="#">COMPANY</a></li>
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-green-400 hover:bg-opacity-10 hover:text-green-400 transition-all duration-300 border-l-4 border-transparent hover:border-green-400 tracking-wider" href="#">SERVICES</a></li>
                        <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-blue-400 hover:bg-opacity-10 hover:text-blue-400 transition-all duration-300 border-l-4 border-transparent hover:border-blue-400 tracking-wider" href="#">TESTIMONIALS</a></li>
                    </ul>
                </div>
                <div class="mt-auto">
                    <div class="pt-6">
                        <a class="block px-6 py-3 mb-3 text-sm text-center font-semibold text-blue-400 hover:text-gray-950 hover:bg-blue-400 border-2 border-blue-400 transition-all duration-300 transform hover:scale-105 tracking-wider" href="#" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">SIGN IN</a>
                        <a class="block px-6 py-3 text-sm text-center font-semibold text-green-400 hover:text-gray-950 hover:bg-green-400 border-2 border-green-400 transition-all duration-300 transform hover:scale-105 tracking-wider" href="#" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">SIGN UP</a>
                    </div>
                    <p class="mt-6 mb-4 text-xs text-center text-gray-500">
                        <span>© 2025 CYBER SYSTEMS ACTIVATED</span>
                    </p>
                </div>
            </nav>
        </div>
    </nav>