Home
Akram Khan
beautifull responsive navbar

beautifull responsive navbar

I create a attractive responsive navbar using tailwindcss and custom css.
also work on mobile devices.

This tailwind example is contributed by Akram Khan, on 06-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Akram Khan

3.5k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extreme Cyberpunk Navbar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes neon-pulse {
            0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
            50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
        }

.neon-text {
            animation: neon-pulse 1.5s infinite alternate;
        }

.bg-animated {
            background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.cyber-grid {
            background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            animation: cyber-grid-move 20s linear infinite;
        }

@keyframes cyber-grid-move {
            0% { background-position: 0 0; }
            100% { background-position: 20px 20px; }
        }

.nav-link {
            position: relative;
            overflow: hidden;
        }

.nav-link::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #00ffff;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

.nav-link:hover::before {
            transform: translateX(0);
        }

.nav-link::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(100%);
            background: linear-gradient(to bottom, #00ffff, #0080ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: transform 0.3s ease;
        }

.nav-link:hover::after {
            transform: translateY(0);
        }

.glitch-effect {
            position: relative;
        }

.glitch-effect::before,
        .glitch-effect::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }

.glitch-effect::before {
            left: 2px;
            text-shadow: -2px 0 #ff00de;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 3s infinite linear alternate-reverse;
        }

.glitch-effect::after {
            left: -2px;
            text-shadow: -2px 0 #00ffff;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse;
        }

@keyframes glitch-anim {
            0% { clip: rect(39px, 9999px, 71px, 0); }
            20% { clip: rect(3px, 9999px, 5px, 0); }
            40% { clip: rect(6px, 9999px, 38px, 0); }
            60% { clip: rect(13px, 9999px, 43px, 0); }
            80% { clip: rect(44px, 9999px, 93px, 0); }
            100% { clip: rect(54px, 9999px, 47px, 0); }
        }

#menu-toggle:checked ~ .menu-icon .hamburger {
            transform: rotate(45deg);
        }

#menu-toggle:checked ~ .menu-icon .hamburger::before {
            transform: translateY(8px) rotate(90deg);
        }

#menu-toggle:checked ~ .menu-icon .hamburger::after {
            transform: translateY(-8px) rotate(90deg);
        }

.hamburger,
        .hamburger::before,
        .hamburger::after {
            content: '';
            display: block;
            background: #00ffff;
            height: 3px;
            width: 30px;
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

.hamburger::before { transform: translateY(-8px); }
        .hamburger::after { transform: translateY(8px); }

@media (max-width: 768px) {
            .menu {
                position: fixed;
                top: 60px;
                left: 0;
                width: 100%;
                height: 0;
                background: rgba(0, 0, 0, 0.9);
                overflow: hidden;
                transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            }

#menu-toggle:checked ~ .menu {
                height: calc(100vh - 60px);
            }
        }
    </style>
</head>
<body class="bg-black text-white min-h-screen">
    <nav class="bg-animated cyber-grid fixed w-full z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <a href="#" class="text-2xl font-bold neon-text glitch-effect" data-text="CYBERLINK">CYBERLINK</a>
                <input type="checkbox" id="menu-toggle" class="hidden">
                <label for="menu-toggle" class="menu-icon cursor-pointer md:hidden">
                    <span class="hamburger"></span>
                </label>
                <ul class="menu hidden md:flex md:items-center space-x-6">
                    <li><a href="#" class="nav-link" data-text="Home">Home</a></li>
                    <li><a href="#" class="nav-link" data-text="Features">Features</a></li>
                    <li><a href="#" class="nav-link" data-text="About">About</a></li>
                    <li><a href="#" class="nav-link" data-text="Contact">Contact</a></li>
                    <li><a href="#" class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold py-2 px-4 rounded hover:from-cyan-600 hover:to-blue-600 transition-all duration-300">Sign Up</a></li>
                </ul>
            </div>
        </div>
    </nav>

<main class="pt-20">
        
        <div class="container mx-auto px-4 py-20">
            <h1 class="text-4xl font-bold mb-4">Welcome to Cyberlink</h1>
            <p>This is a placeholder for your main content. The navbar above demonstrates the extreme cyberpunk design.</p>
        </div>
    </main>

menuToggle.addEventListener('change', function() {
            if (this.checked) {
                menu.classList.remove('hidden');
                menu.classList.add('flex', 'flex-col', 'items-center', 'justify-center', 'space-y-4');
            } else {
                menu.classList.add('hidden');
                menu.classList.remove('flex', 'flex-col', 'items-center', 'justify-center', 'space-y-4');
            }
        });

Related Examples

Responsive Gradient Navbar with Toggle
A modern, responsive navbar built with Tailwind CSS. Features a gradient background, flex layout, smooth hover effects, and a mobile toggle menu for optimal usability on all screen sizes.

Author:
Sudip chaudhary

8 months ago

1.2k
Colourful NavBar by Itunu Ijila
Responsive Colorful Navbar with Tailwind CSS - Free HTML Template Modern, mobile-friendly navigation bar built with Tailwind CSS featuring vibrant gradient colors (purple, pink, red). Includes hamburger menu for mobile devices, smooth hover effects, and easy customization. Perfect for websites, landing pages, and web applications. Copy-paste ready HTML code with Tailwind CDN - no build process required. Fully responsive design that works on all screen sizes. Keywords: Tailwind CSS navbar, responsive navigation bar, colorful navbar template, HTML navbar component, mobile menu, gradient navbar, Tailwind navigation, free navbar template

Author:
Ijila Itunu

3 weeks ago

27
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

7 months ago

1.1k
Tailwind Sidebar Layout

Author:
Oliver Hansen

3 years ago

61.8k
Modern page
hero page by salvator

Author:
Baraka Salvator

8 months ago

1.3k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

11 months ago

1.9k
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

11 months ago

2.5k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.5k
Garden
by salvator

Author:
Baraka Salvator

8 months ago

1.2k
hero modern
hero modern

Author:
Omer fils ELENGA

1 month ago

67
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

5.4k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components