Transparent 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
45
46
47
48
49
50
51
52

<nav class="absolute top-0 left-0 right-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-20">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-10 h-10 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center border border-white/20">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/>
          </svg>
        </div>
        <span class="text-white text-xl font-bold">Elevate</span>
      </a>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center gap-8">
        <a href="#" class="text-white/90 hover:text-white transition-colors font-medium">Product</a>
        <a href="#" class="text-white/80 hover:text-white transition-colors">Solutions</a>
        <a href="#" class="text-white/80 hover:text-white transition-colors">Pricing</a>
        <a href="#" class="text-white/80 hover:text-white transition-colors">Company</a>
      </div>

      <!-- CTA Buttons -->
      <div class="hidden md:flex items-center gap-4">
        <a href="#" class="text-white/80 hover:text-white transition-colors font-medium">Sign In</a>
        <a href="#" class="px-5 py-2.5 bg-white text-gray-900 font-semibold rounded-full hover:bg-white/90 transition-colors shadow-lg shadow-white/10">
          Start Free Trial
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button class="md:hidden text-white p-2" aria-label="Menu">
        <svg class="w-6 h-6" 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>

  <!-- Mobile Menu -->
  <div class="md:hidden hidden bg-gray-900/95 backdrop-blur-lg border-t border-white/10" id="mobile-menu">
    <div class="px-4 py-6 space-y-4">
      <a href="#" class="block text-white/90 font-medium">Product</a>
      <a href="#" class="block text-white/70">Solutions</a>
      <a href="#" class="block text-white/70">Pricing</a>
      <a href="#" class="block text-white/70">Company</a>
      <div class="pt-4 flex flex-col gap-3">
        <a href="#" class="text-center py-2.5 text-white/80 font-medium">Sign In</a>
        <a href="#" class="text-center py-2.5 bg-white text-gray-900 font-semibold rounded-full">Start Free Trial</a>
      </div>
    </div>
  </div>
</nav>

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

# Transparent Navbar

Transparent / overlay navbar.

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

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