SaaS 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

<nav class="bg-white border-b border-gray-100">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-3">
        <div class="w-9 h-9 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20">
          <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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
          </svg>
        </div>
        <span class="text-gray-900 text-xl font-bold">Quantify</span>
        <span class="hidden sm:inline-flex px-2 py-0.5 text-xs font-medium text-emerald-700 bg-emerald-100 rounded">BETA</span>
      </a>

      <!-- Desktop Navigation -->
      <div class="hidden lg:flex items-center gap-1">
        <a href="#" class="px-4 py-2 text-gray-900 font-medium rounded-lg hover:bg-gray-50 transition-colors">Product</a>
        <a href="#" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors">Solutions</a>
        <a href="#" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors">Pricing</a>
        <a href="#" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors">Docs</a>
        <a href="#" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors">Enterprise</a>
      </div>

      <!-- Right Actions -->
      <div class="flex items-center gap-3">
        <a href="#" class="hidden sm:inline-flex px-4 py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors">Sign In</a>
        <a href="#" class="px-4 py-2.5 bg-gray-900 text-white text-sm font-semibold rounded-lg hover:bg-gray-800 transition-colors shadow-lg shadow-gray-900/10">
          Start Free Trial
        </a>
        <button class="lg: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>
  </div>
</nav>

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

# SaaS Navbar

SaaS product navbar.

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

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