Home
Crimson
Navbar

Navbar

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Crimson

2.6k

Fork Fullscreen

<div class="relative px-4 sm:px-8 py-4">
            <div class="flex items-center justify-between">
                
                <div class="flex items-center space-x-3 group">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-lg blur group-hover:blur-md transition-all duration-300"></div>
                        <svg class="relative w-8 sm:w-10 h-8 sm:h-10 text-white transform group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M21.721 12.752a9.711 9.711 0 00-.945-5.003 12.754 12.754 0 01-4.339 2.708 18.991 18.991 0 01-.214 4.772 17.165 17.165 0 005.498-2.477zM14.634 15.55a17.324 17.324 0 00.332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 00.332 4.647 17.385 17.385 0 005.268 0zM9.772 17.119a18.963 18.963 0 004.456 0A17.182 17.182 0 0112 21.724a17.18 17.18 0 01-2.228-4.605zM7.777 15.23a18.87 18.87 0 01-.214-4.774 12.753 12.753 0 01-4.34-2.708 9.711 9.711 0 00-.944 5.004 17.165 17.165 0 005.498 2.477zM21.356 14.752a9.765 9.765 0 01-7.478 6.817 18.64 18.64 0 001.988-4.718 18.627 18.627 0 005.49-2.098zM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 001.988 4.718 9.765 9.765 0 01-7.478-6.816zM13.878 2.43a9.755 9.755 0 016.116 3.986 11.267 11.267 0 01-3.746 2.504 18.63 18.63 0 00-2.37-6.49zM12 2.276a17.152 17.152 0 012.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0112 2.276zM10.122 2.43a18.629 18.629 0 00-2.37 6.49 11.266 11.266 0 01-3.746-2.504 9.755 9.755 0 016.116-3.985z"/>
                        </svg>
                    </div>
                    <span class="text-xl sm:text-2xl font-bold text-white">OceanUI</span>
                </div>

<div class="hidden md:flex items-center space-x-10">
                    <a href="#" class="relative group">
                        <span class="text-blue-100 group-hover:text-white transition-colors duration-300">Home</span>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 group-hover:w-full transition-all duration-300"></div>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white/20 group-hover:w-full transition-all duration-500 delay-100"></div>
                    </a>
                    <a href="#" class="relative group">
                        <span class="text-blue-100 group-hover:text-white transition-colors duration-300">Features</span>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 group-hover:w-full transition-all duration-300"></div>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white/20 group-hover:w-full transition-all duration-500 delay-100"></div>
                    </a>
                    <a href="#" class="relative group">
                        <span class="text-blue-100 group-hover:text-white transition-colors duration-300">About</span>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 group-hover:w-full transition-all duration-300"></div>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white/20 group-hover:w-full transition-all duration-500 delay-100"></div>
                    </a>
                    <a href="#" class="relative group">
                        <span class="text-blue-100 group-hover:text-white transition-colors duration-300">Contact</span>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 group-hover:w-full transition-all duration-300"></div>
                        <div class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white/20 group-hover:w-full transition-all duration-500 delay-100"></div>
                    </a>
                </div>

<div class="flex items-center space-x-4">
                    
                    <button class="hidden sm:flex relative group">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-lg blur opacity-60 group-hover:opacity-100 transition duration-200"></div>
                        <div class="relative px-5 sm:px-7 py-2 sm:py-3 bg-blue-950 rounded-lg leading-none flex items-center">
                            <div class="flex items-center space-x-2">
                                <span class="text-blue-200 group-hover:text-white transition duration-200">Get Started</span>
                                <svg class="w-5 h-5 text-blue-200 group-hover:text-white transform group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                </svg>
                            </div>
                        </div>
                    </button>

<button @click="isOpen = !isOpen" class="md:hidden relative group" aria-label="Toggle mobile menu">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 rounded blur opacity-60 group-hover:opacity-100 transition duration-200"></div>
                        <div class="relative p-2 bg-blue-950 rounded leading-none">
                            <svg x-show="!isOpen" class="w-6 h-6 text-blue-200 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                            </svg>
                            <svg x-show="isOpen" class="w-6 h-6 text-blue-200 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </div>
                    </button>
                </div>
            </div>

<div x-show="isOpen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" class="relative mt-4 md:hidden">
                <div class="px-2 pt-2 pb-3 space-y-1 bg-blue-900/50 backdrop-blur-sm rounded-lg border border-blue-500/10">
                    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-100 hover:text-white hover:bg-blue-800/50 transition-all duration-200">Home</a>
                    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-100 hover:text-white hover:bg-blue-800/50 transition-all duration-200">Features</a>
                    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-100 hover:text-white hover:bg-blue-800/50 transition-all duration-200">About</a>
                    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-100 hover:text-white hover:bg-blue-800/50 transition-all duration-200">Contact</a>
                    
                    <div class="px-3 py-2">
                        <button class="w-full relative group">
                            <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-lg blur opacity-60 group-hover:opacity-100 transition duration-200"></div>
                            <div class="relative px-4 py-2 bg-blue-950 rounded-lg leading-none flex items-center justify-center">
                                <span class="text-blue-200 group-hover:text-white transition duration-200">Get Started</span>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

<script src="//unpkg.com/alpinejs" defer></script>
</body>

Related Examples

hero modern
hero modern

Author:
Omer fils ELENGA

1 month ago

67
navbar
navbar

Author:
Omer fils ELENGA

1 month ago

76
vav bar
html , css

Author:
Hacker Development

9 months ago

1.1k
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.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
Navbar

Author:
Morris Muriuki Muthigani

6 months ago

752
htmlbasics

Author:
Anonymous

7 months ago

846
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

8 months ago

720
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

2 years ago

7.4k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

8 months ago

834
Tailwind Sidebar Layout

Author:
Oliver Hansen

3 years ago

61.8k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components