Blog Navbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<nav class="bg-white border-b border-gray-200">
  <div class="max-w-6xl mx-auto px-4 sm:px-6">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-9 h-9 bg-gradient-to-br from-rose-500 to-pink-600 rounded-xl flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
          </svg>
        </div>
        <span class="text-gray-900 text-xl font-bold">The Daily</span>
        <span class="hidden sm:inline text-sm text-gray-500 font-normal">Insightful perspectives</span>
      </a>

      <!-- Navigation -->
      <div class="hidden md:flex items-center gap-6">
        <a href="#" class="text-gray-900 font-medium hover:text-rose-500 transition-colors">Home</a>
        <a href="#" class="text-gray-500 hover:text-rose-500 transition-colors">Tech</a>
        <a href="#" class="text-gray-500 hover:text-rose-500 transition-colors">Business</a>
        <a href="#" class="text-gray-500 hover:text-rose-500 transition-colors">Culture</a>
        <a href="#" class="text-gray-500 hover:text-rose-500 transition-colors">Design</a>
        <a href="#" class="text-gray-500 hover:text-rose-500 transition-colors">Science</a>
      </div>

      <!-- Actions -->
      <div class="flex items-center gap-4">
        <button class="p-2 text-gray-400 hover:text-gray-600 transition-colors" aria-label="Search">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </button>
        <a href="#" class="hidden sm:inline-flex px-4 py-2 text-gray-600 hover:text-gray-900 text-sm font-medium transition-colors">Sign In</a>
        <a href="#" class="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-full hover:bg-gray-800 transition-colors">Subscribe</a>
      </div>

      <!-- Mobile Menu -->
      <button class="md:hidden p-2 text-gray-500" aria-label="Menu">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12

# Blog Navbar

Blog-oriented navbar.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/blog-navbar
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`