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

Navigation Bar Component

A responsive navigation bar with Microinteractions, and dark mode support using Tailwind CSS.

Open

Skeuomorphic Navigation Bar

A portfolio navigation bar component designed with skeuomorphic styles and a pastel color scheme, including support for dark mode. It features interactive elements such as links and a dropdown menu.

Open

Social Media Navigation Bar

Glassmorphism Grayscale Simple Social Media Navigation Bar Component

Open