Components Navigation Navigation Component

Navigation Component

A responsive navigation component styled for dark mode using Tailwind CSS.

Preview

HTML Code

<nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

Related Components

3D_Candy_Finance_Navigation

A simple, responsive navigation component for finance/banking applications, featuring a candy/sweet color scheme and subtle 3D design elements, with dark mode support.

Open

Material Design Navigation Component

A simple, responsive Material Design navigation component for social media interfaces using a grayscale color scheme. Features a clean layout with logo, navigation links, search bar, and user avatar. Includes dark mode support using Tailwind's dark: prefix.

Open

Brutalist E-commerce Navigation Component

A complex and brutalist e-commerce navigation component using Tailwind CSS, featuring a triadic color scheme (Yellow, Cyan, Fuchsia) with high contrast (Black/White), a CSS-only mega-menu, CSS-only search reveal, a CSS-only responsive mobile menu, and dark mode support. HTML only, no JavaScript.

Open