Navigation Enhancement Components

A Retro/Vintage navigation bar with a complex design for professional websites, featuring triadic color scheme and responsive dark theme support.

Open Preview

                <nav class="bg-pink-700 dark:bg-pink-800 p-4">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
            <span class="text-yellow-300 dark:text-yellow-200 text-2xl font-bold">MyCompany</span>
        </div>
        <div class="hidden md:flex space-x-6 text-white dark:text-gray-300">
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Home</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">About</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Services</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Contact</a>
        </div>
        <div class="relative">
            <button class="bg-yellow-300 dark:bg-yellow-200 text-black dark:text-black px-4 py-2 rounded-md hover:shadow-lg transition">Login</button>
            <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg hidden group-hover:block">
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
            </div>
        </div>
        <div class="md:hidden">
            <button class="text-white dark:text-gray-300 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
            </button>
        </div>
    </div>
</nav>

<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-7xl mx-auto text-center">
        <h1 class="text-4xl font-bold text-green-500 dark:text-green-400">Welcome to our Retro Business</h1>
        <p class="mt-2 text-gray-700 dark:text-gray-400">Bringing you the best services with a touch of nostalgia.</p>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=1" alt="Service 1" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service One</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 1.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=2" alt="Service 2" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Two</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 2.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=3" alt="Service 3" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Three</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 3.</p>
            </div>
        </div>
    </div>
</section>

Navigation Enhancement Component

A responsive navigation component designed for a portfolio, utilizing a brutalism style with a pastel color scheme and dark mode support.

Open Preview

                <nav class="bg-white dark:bg-gray-800 p-6 flex justify-between items-center shadow-lg">
    <a href="#" class="text-2xl font-bold text-pink-600 dark:text-pink-300">My Portfolio</a>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Projects</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Contact</a>
    </div>
</nav>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=1" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, emphasizing its features, technologies used, and challenges faced.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=2" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, focusing on user experience and the development process.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=3" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, detailing the problem solved and feedback received.</p>
        </div>
    </div>
</section>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Meet the Team</h2>
    <div class="flex flex-wrap justify-center space-x-6 mt-6">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Frontend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Backend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Adam Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
        </div>
    </div>
</section>

Navigation Enhancement Components

A retro/vintage styled navigation component designed for blog and content consumption with dark theme support.

Open Preview

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-2xl font-bold hover:text-blue-400 dark:hover:text-blue-300">Retro Blog</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">About</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Blog</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Home</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Blog</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Welcome to the Retro Blog!</h1>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/150" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/151" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/152" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
    </div>
</main>

<footer class="bg-gray-800 text-white p-4 dark:bg-gray-900 mt-8">
    <div class="container mx-auto text-center">
        <p>&copy; 2023 Retro Blog. All rights reserved.</p>
    </div>
</footer>

Navigation Enhancement Components

A responsive navigation component styled with a retro/vintage aesthetic, suited for e-commerce applications, with dark theme support and moderate interactivity.

Open Preview

                <nav class="bg-gray-900 text-white p-4 dark:bg-gray-800">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-yellow-400 dark:hover:text-yellow-300">ShopRetro</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Home</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Products</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">About Us</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-lg p-2 dark:bg-gray-600" />
            <a href="#" class="relative">
                <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-yellow-400 dark:border-yellow-300" />
                <span class="absolute top-0 right-0 bg-yellow-500 rounded-full h-3 w-3 dark:bg-yellow-300"></span>
            </a>
            <button class="bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-300 rounded-lg p-2">Cart</button>
        </div>
    </div>
    <div class="bg-yellow-500 p-4 dark:bg-yellow-400">
        <div class="container mx-auto flex justify-between items-center">
            <p class="text-gray-900 dark:text-gray-800">Free Shipping on orders over $50</p>
            <a href="#" class="bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-2">Shop Now</a>
        </div>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
    <div class="container mx-auto flex flex-wrap">
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$19.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$29.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$39.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
    </div>
</main>

Navigation Enhancement Component

A glassmorphism-inspired navigation component designed for showcasing portfolio work and products with earth tones and dark mode support. The component features a frosted glass effect, responsive design, and minimal elements.

Open Preview

                <nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Navigation Enhancement Components

A responsive navigation enhancement component for a blog in dark mode style with vibrant colors and moderate complexity features.

Open Preview

                <nav class="bg-gray-900 text-white p-4 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-bold hover:text-blue-400">My Blog</a>
            <a href="#" class="hover:text-blue-400">Home</a>
            <a href="#" class="hover:text-blue-400">About</a>
            <a href="#" class="hover:text-blue-400">Contact</a>
        </div>
        <div class="relative">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
            <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/>
                <circle cx="10.5" cy="10.5" r="6.5"/>
            </svg>
        </div>
    </div>
</nav>

<section class="bg-gray-800 text-white p-8 mt-4">
    <h2 class="text-2xl font-bold mb-4">Latest Articles</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 1</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 2</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 3</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
    </div>
</section>

<footer class="bg-gray-900 text-white p-4 mt-4">
    <div class="container mx-auto flex justify-between items-center">
        <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="user avatar" class="w-8 h-8 rounded-full" />
            <span class="text-sm">User Name</span>
        </div>
    </div>
</footer>

Navigation Enhancement Components

A 3D designed navigation component with an analogous color scheme, moderate complexity, suitable for dashboard data visualization and control panels.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex items-center justify-between">
        <h1 class="text-white text-2xl font-bold">Dashboard</h1>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Home</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-300 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700 dark:border-gray-300 mr-3">
        <div class="text-white">
            <p class="text-sm">John Doe</p>
            <p class="text-xs text-gray-400">Admin</p>
        </div>
    </div>
    <div class="mt-4 bg-gray-700 dark:bg-gray-800 rounded-lg shadow-md p-4">
        <h2 class="text-white text-lg font-semibold">Quick Links</h2>
        <ul class="mt-2 space-y-2">
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Profile</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Messages</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Alerts</a></li>
        </ul>
    </div>
</nav>

Navigation Enhancement Components Component

A complex, brutalist-style navigation component for corporate websites with analogous color scheme, responsive design, and dark mode support. Features unusual layouts and high contrast.

Open Preview

                <nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center flex-wrap">
    <div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
      <ul class="lg:flex items-center justify-end flex-1">
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
        </li>
         <li class="my-2 lg:my-0">
          <div class="relative">
            <button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
              Dropdown
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navigation Enhancement Components

A simple dark mode navigation enhancement component for showcasing a portfolio, using Tailwind CSS.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="max-w-6xl mx-auto flex justify-between items-center">
        <h1 class="text-white text-xl font-bold">My Portfolio</h1>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
        </ul>
    </div>
</nav>

<section class="bg-gray-900 dark:bg-gray-800 p-8">
    <div class="max-w-6xl mx-auto text-center">
        <h2 class="text-white text-2xl font-bold">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 1</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 2</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 3</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
            </div>
        </div>
    </div>
</section>

<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
    <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Navigation Enhancement Component

A navigation enhancement component designed in a brutalist style. Featuring responsive effects, dark theme support, and placeholder images.

Open Preview

                <nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

Categories

Navigation Enhancement Components