Home
Rajesh Maheshwari
Transparent Navbar

Transparent Navbar

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Header Navbar

Author Rajesh Maheshwari

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<body>
    
    <nav class="absolute top-0 left-0 w-full z-10 bg-transparent">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20">
                <div class="flex items-center">
                    <a href="#" class="flex-shrink-0 flex items-center">
                        <img class="h-10 w-auto" src="https://tailwindflex.com/images/logo.svg" alt="Logo">
                        <span class="ml-2 text-xl font-bold text-white">Company</span>
                    </a>
                    <div class="hidden md:ml-10 md:flex md:space-x-10">
                        <a href="#" class="text-white hover:text-gray-200 px-3 py-2 text-sm font-medium">
                            Home
                        </a>
                        <a href="#" class="text-white hover:text-gray-200 px-3 py-2 text-sm font-medium">
                            About
                        </a>
                        <a href="#" class="text-white hover:text-gray-200 px-3 py-2 text-sm font-medium">
                            Services
                        </a>
                        <a href="#" class="text-white hover:text-gray-200 px-3 py-2 text-sm font-medium">
                            Contact
                        </a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="hidden md:ml-4 md:flex md:items-center md:space-x-4">
                        <a href="#" class="text-white hover:text-gray-200 px-3 py-2 text-sm font-medium">
                            Login
                        </a>
                        <a href="#" class="bg-white text-indigo-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white">
                            Sign Up
                        </a>
                    </div>
                    <div class="flex items-center md:hidden">
                        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false">
                            <span class="sr-only">Open main menu</span>
                            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 bg-gray-800 bg-opacity-90">
                <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">
                    Home
                </a>
                <a href="#" class="text-gray-300 hover:text-white hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    About
                </a>
                <a href="#" class="text-gray-300 hover:text-white hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    Services
                </a>
                <a href="#" class="text-gray-300 hover:text-white hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    Contact
                </a>
                <div class="pt-4 pb-3 border-t border-gray-700">
                    <div class="flex items-center px-5 space-y-3">
                        <a href="#" class="block w-full text-center text-white bg-gray-700 px-3 py-2 rounded-md text-base font-medium hover:bg-gray-600">
                            Login
                        </a>
                    </div>
                    <div class="mt-3 px-5">
                        <a href="#" class="block w-full text-center bg-white text-indigo-600 px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100">
                            Sign Up
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

<div class="bg-gradient-to-r from-purple-800 to-indigo-700 h-screen flex items-center justify-center">
        <div class="text-center text-white px-4">
            <h1 class="text-4xl font-extrabold sm:text-5xl md:text-6xl">
                Welcome to Our Website
            </h1>
            <p class="mt-3 max-w-md mx-auto text-base text-gray-200 sm:text-lg md:mt-5 md:text-xl">
                This transparent navbar works great with hero sections.
            </p>
            <div class="mt-10">
                <a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10">
                    Get Started
                </a>
            </div>
        </div>
    </div>

Related Examples

Simple navbar
semi transparent

Author:
Laurits

2 years ago

12.8k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 month ago

556
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

55.2k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

6 months ago

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

4 months ago

1.6k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

10.1k
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

1 year ago

7.9k
Tailwind css navigation header
Tailwind css navigation header

Author:
Abid Ullah

6 months ago

1.2k
Navbar
Navbar for primary menu

Author:
Anonymous

10 months ago

3.9k
NavBar

Author:
Samuel Abera

2 months ago

934
Basic sidebar

Author:
Rajesh Maheshwari

1 week ago

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

Author:
Akram Khan

8 months ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components