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.1k

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

Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

7 months ago

821
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

5 months ago

990
basichtml
this is basic html

Author:
Anonymous

3 months ago

289
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

8 months ago

3.4k
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

13.4k
joker
joker cyber punk

Author:
Baraka Salvator

3 months ago

855
Brand Navbar
Menu side bar navigation bar

Author:
ORGIN_DREAMS

4 months ago

415
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

6 months ago

1.5k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.6k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
Pardha Saradhy Madabhushi

1 year ago

2.1k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

4 months ago

553
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

3 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components