Components Navigation Bar Blog Navigation Bar

Blog Navigation Bar

Responsive Navigation Bar with Dark Mode support for Blog/Content websites. Features a minimalist/flat design with a pastel color scheme.

Preview

HTML Code

<nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Related Components

Skeuomorphic Social Media Nav Bar

Skeuomorphic social media navigation bar with triadic color scheme and moderate complexity.

Open

Skeuomorphic Navigation Bar

A responsive navigation bar component designed in a skeuomorphic style with dark theme support using Tailwind CSS.

Open

Navigation Bar Component

A complex, responsive navigation bar component designed with a paper/print-inspired aesthetic and jewel-tone color scheme, suitable for agriculture/farming websites. Includes dark mode support and multiple interactive elements.

Open