<!-- CSS-only responsive navbar: checkbox toggles mobile menu -->
<div>
  <input type="checkbox" id="nav-basic" hidden>
  <nav class="navbar">
    <div class="navbar-start">
      <a href="#" class="navbar-brand">
        <img src="https://placehold.co/32x32/3b82f6/fff?text=U" alt="Logo">
        <span class="navbar-brand-text">Acme</span>
      </a>
    </div>

    <div class="navbar-nav">
      <a href="#" class="navbar-link navbar-link-active">Home</a>
      <a href="#" class="navbar-link">Products</a>
      <a href="#" class="navbar-link">Pricing</a>
      <a href="#" class="navbar-link">Contact</a>
    </div>

    <div class="navbar-end">
      <a href="#" class="btn color-primary btn-sm">Get Started</a>
      <label for="nav-basic" class="menu-button" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile">
    <a href="#" class="navbar-link navbar-link-active">Home</a>
    <a href="#" class="navbar-link">Products</a>
    <a href="#" class="navbar-link">Pricing</a>
    <a href="#" class="navbar-link">Contact</a>
    <a href="#" class="btn color-primary mt-2">Get Started</a>
  </div>
</div>

Requires: ux.min.css

<div>
  <input type="checkbox" id="nav-tw" class="hidden peer">
  <nav class="flex items-center w-full px-4 min-h-16 bg-base-100 border-b border-base-300 gap-2">
    <div class="flex items-center gap-2 shrink-0">
      <a href="#" class="flex items-center gap-2 no-underline" style="color:var(--color-base-content)">
        <img src="https://placehold.co/32x32/3b82f6/fff?text=U" alt="Logo" class="h-8 w-auto">
        <span class="font-bold text-lg whitespace-nowrap">Acme</span>
      </a>
    </div>
    <div class="hidden md:flex items-center gap-1">
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-primary">Home</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Products</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Pricing</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Contact</a>
    </div>
    <div class="flex items-center gap-2 shrink-0 ml-auto">
      <a href="#" class="btn color-primary btn-sm hidden md:inline-flex">Get Started</a>
      <label for="nav-tw" class="menu-button md:hidden flex" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="hidden peer-checked:flex flex-col w-full bg-base-100 border-b border-base-300 p-3 gap-1 md:!hidden">
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-primary">Home</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Products</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Pricing</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Contact</a>
    <a href="#" class="btn color-primary mt-2">Get Started</a>
  </div>
</div>

Requires: tw.min.css

// No JavaScript needed! The hidden checkbox + label handles the toggle.
// Structure: <input checkbox> → <nav> → <div.navbar-mobile>
// The checkbox :checked state shows/hides the mobile menu via CSS.
//
// Alternatively, you can use JS if you prefer:
// const btn = document.querySelector('.menu-button');
// const menu = document.querySelector('.navbar-mobile');
// btn.addEventListener('click', () => {
//   const isOpen = menu.dataset.state === 'open';
//   menu.dataset.state = isOpen ? 'closed' : 'open';
// });

<div>
  <input type="checkbox" id="nav-center" hidden>
  <nav class="navbar">
    <div class="navbar-start">
      <a href="#" class="navbar-brand">
        <img src="https://placehold.co/32x32/8b5cf6/fff?text=X" alt="Logo">
        <span class="navbar-brand-text">Brand</span>
      </a>
    </div>

    <div class="navbar-center">
      <div class="navbar-nav">
        <a href="#" class="navbar-link navbar-link-active">Dashboard</a>
        <a href="#" class="navbar-link">Analytics</a>
        <a href="#" class="navbar-link">Settings</a>
      </div>
    </div>

    <div class="navbar-end">
      <button class="btn btn-ghost btn-sm">
        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      </button>
      <div class="avatar avatar-sm">
        <img src="https://placehold.co/32x32/10b981/fff?text=JD" alt="User">
      </div>
      <label for="nav-center" class="menu-button" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile">
    <a href="#" class="navbar-link navbar-link-active">Dashboard</a>
    <a href="#" class="navbar-link">Analytics</a>
    <a href="#" class="navbar-link">Settings</a>
  </div>
</div>

Requires: ux.min.css

<nav class="flex items-center w-full px-4 min-h-16 bg-base-100 border-b border-base-300 gap-2">
  <div class="flex items-center gap-2 shrink-0">
    <a href="#" class="flex items-center gap-2 no-underline" style="color:var(--color-base-content)">
      <img src="https://placehold.co/32x32/8b5cf6/fff?text=X" alt="Logo" class="h-8 w-auto">
      <span class="font-bold text-lg whitespace-nowrap">Brand</span>
    </a>
  </div>
  <div class="flex-1 flex items-center justify-center gap-1">
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-primary">Dashboard</a>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Analytics</a>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Settings</a>
  </div>
  <div class="flex items-center gap-2 shrink-0 ml-auto">
    <button class="btn btn-ghost btn-sm">
      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
    </button>
    <div class="avatar avatar-sm">
      <img src="https://placehold.co/32x32/10b981/fff?text=JD" alt="User">
    </div>
  </div>
</nav>

Requires: tw.min.css

// No JavaScript required

<div>
  <input type="checkbox" id="nav-shadow" hidden>
  <nav class="navbar navbar-shadow">
    <div class="navbar-start">
      <a href="#" class="navbar-brand">
        <span class="navbar-brand-text">ShadowNav</span>
      </a>
    </div>

    <div class="navbar-nav">
      <a href="#" class="navbar-link navbar-link-active">Home</a>
      <a href="#" class="navbar-link">Docs</a>
      <a href="#" class="navbar-link">Blog</a>
    </div>

    <div class="navbar-end">
      <a href="#" class="btn btn-ghost btn-sm">Log in</a>
      <a href="#" class="btn color-primary btn-sm">Sign up</a>
      <label for="nav-shadow" class="menu-button" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile">
    <a href="#" class="navbar-link navbar-link-active">Home</a>
    <a href="#" class="navbar-link">Docs</a>
    <a href="#" class="navbar-link">Blog</a>
  </div>
</div>

Requires: ux.min.css

<nav class="flex items-center w-full px-4 min-h-16 bg-base-100 gap-2" style="box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);">
  <div class="flex items-center gap-2 shrink-0">
    <span class="font-bold text-lg whitespace-nowrap" style="color:var(--color-base-content)">ShadowNav</span>
  </div>
  <div class="hidden md:flex items-center gap-1">
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-primary">Home</a>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Docs</a>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70 hover:text-base-content hover:bg-base-200">Blog</a>
  </div>
  <div class="flex items-center gap-2 shrink-0 ml-auto">
    <a href="#" class="btn btn-ghost btn-sm">Log in</a>
    <a href="#" class="btn color-primary btn-sm">Sign up</a>
  </div>
</nav>

Requires: tw.min.css

// No JavaScript required

<div class="relative p-0 rounded-box overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 120px;">
  <input type="checkbox" id="nav-glass" hidden>
  <nav class="navbar glass" style="border-bottom: none;">
    <div class="navbar-start">
      <a href="#" class="navbar-brand" style="color: white;">
        <span class="navbar-brand-text">GlassApp</span>
      </a>
    </div>

    <div class="navbar-nav">
      <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.9);">Home</a>
      <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.7);">About</a>
      <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.7);">Blog</a>
    </div>

    <div class="navbar-end">
      <a href="#" class="btn btn-sm btn-outline" style="color: white; border-color: rgba(255,255,255,0.3);">Sign In</a>
      <label for="nav-glass" class="menu-button" aria-label="Menu" style="color: white;">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile glass">
    <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.9);">Home</a>
    <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.7);">About</a>
    <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.7);">Blog</a>
  </div>
</div>

Requires: ux.min.css

<div class="relative p-0 rounded-box overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 120px;">
  <nav class="flex items-center w-full px-4 min-h-16 glass gap-2" style="border-bottom-color: var(--color-glass-border);">
    <div class="flex items-center gap-2 shrink-0">
      <span class="font-bold text-lg text-white">GlassApp</span>
    </div>
    <div class="hidden md:flex items-center gap-1">
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field" style="color:rgba(255,255,255,0.9);">Home</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field" style="color:rgba(255,255,255,0.7);">About</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field" style="color:rgba(255,255,255,0.7);">Blog</a>
    </div>
    <div class="flex items-center gap-2 shrink-0 ml-auto">
      <a href="#" class="btn btn-sm btn-outline" style="color: white; border-color: rgba(255,255,255,0.3);">Sign In</a>
    </div>
  </nav>
</div>

Requires: tw.min.css

// No JavaScript required — checkbox handles mobile toggle

<div class="bg-base-200 p-0 rounded-box overflow-hidden" style="min-height: 120px;">
  <input type="checkbox" id="nav-float" hidden>
  <nav class="navbar navbar-floating">
    <div class="navbar-start">
      <a href="#" class="navbar-brand">
        <img src="https://placehold.co/28x28/f59e0b/fff?text=F" alt="Logo">
        <span class="navbar-brand-text">FloatUI</span>
      </a>
    </div>

    <div class="navbar-nav">
      <a href="#" class="navbar-link navbar-link-active">Docs</a>
      <a href="#" class="navbar-link">Components</a>
      <a href="#" class="navbar-link">Templates</a>
    </div>

    <div class="navbar-end">
      <a href="#" class="btn color-primary btn-sm">Download</a>
      <label for="nav-float" class="menu-button" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile">
    <a href="#" class="navbar-link navbar-link-active">Docs</a>
    <a href="#" class="navbar-link">Components</a>
    <a href="#" class="navbar-link">Templates</a>
  </div>
</div>

Requires: ux.min.css

<div class="bg-base-200 p-0 rounded-box overflow-hidden" style="min-height: 120px;">
  <nav class="flex items-center w-full px-4 min-h-16 bg-base-100 gap-2 mx-4 mt-4 rounded-box border border-base-300" style="width: calc(100% - 2rem);">
    <div class="flex items-center gap-2 shrink-0">
      <a href="#" class="flex items-center gap-2 no-underline" style="color:var(--color-base-content)">
        <img src="https://placehold.co/28x28/f59e0b/fff?text=F" alt="Logo" class="h-7 w-auto">
        <span class="font-bold text-lg whitespace-nowrap">FloatUI</span>
      </a>
    </div>
    <div class="hidden md:flex items-center gap-1">
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-primary">Docs</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70">Components</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70">Templates</a>
    </div>
    <div class="flex items-center gap-2 shrink-0 ml-auto">
      <a href="#" class="btn color-primary btn-sm">Download</a>
    </div>
  </nav>
</div>

Requires: tw.min.css

// No JavaScript required

<div>
  <input type="checkbox" id="nav-compact" hidden>
  <nav class="navbar navbar-compact">
    <div class="navbar-start">
      <a href="#" class="navbar-brand">
        <span class="navbar-brand-text" style="font-size: 0.875rem;">CompactApp</span>
      </a>
    </div>

    <div class="navbar-nav">
      <a href="#" class="navbar-link navbar-link-active">Home</a>
      <a href="#" class="navbar-link">Features</a>
      <a href="#" class="navbar-link">Docs</a>
    </div>

    <div class="navbar-end">
      <a href="#" class="btn btn-ghost btn-sm">Log in</a>
      <a href="#" class="btn color-primary btn-sm">Sign up</a>
      <label for="nav-compact" class="menu-button menu-button-sm" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile">
    <a href="#" class="navbar-link navbar-link-active">Home</a>
    <a href="#" class="navbar-link">Features</a>
    <a href="#" class="navbar-link">Docs</a>
  </div>
</div>

Requires: ux.min.css

<nav class="flex items-center w-full px-4 bg-base-100 border-b border-base-300 gap-2" style="min-height: 3rem;">
  <div class="flex items-center gap-2 shrink-0">
    <span class="font-bold text-sm whitespace-nowrap">CompactApp</span>
  </div>
  <div class="hidden md:flex items-center gap-1">
    <a href="#" class="inline-flex items-center px-3 py-1.5 text-sm font-medium no-underline rounded-field text-primary">Home</a>
    <a href="#" class="inline-flex items-center px-3 py-1.5 text-sm font-medium no-underline rounded-field text-base-content/70">Features</a>
    <a href="#" class="inline-flex items-center px-3 py-1.5 text-sm font-medium no-underline rounded-field text-base-content/70">Docs</a>
  </div>
  <div class="flex items-center gap-2 shrink-0 ml-auto">
    <a href="#" class="btn btn-ghost btn-sm">Log in</a>
    <a href="#" class="btn color-primary btn-sm">Sign up</a>
  </div>
</nav>

Requires: tw.min.css

// No JavaScript required

<div>
  <input type="checkbox" id="nav-full" hidden>
  <nav class="navbar">
    <div class="navbar-start">
      <a href="#" class="navbar-brand">
        <img src="https://placehold.co/32x32/3b82f6/fff?text=E" alt="Logo">
        <span class="navbar-brand-text">ERPlora</span>
      </a>
    </div>

    <div class="navbar-nav">
      <a href="#" class="navbar-link navbar-link-active">Features</a>
      <a href="#" class="navbar-link">Marketplace</a>
      <a href="#" class="navbar-link">Products</a>
      <a href="#" class="navbar-link">Pricing</a>
      <a href="#" class="navbar-link">Contact</a>
    </div>

    <div class="navbar-end">
      <select class="select select-sm" style="width: 70px;">
        <option>EN</option>
        <option>ES</option>
      </select>
      <a href="#" class="btn color-primary btn-sm">Get Started</a>
      <label for="nav-full" class="menu-button" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="navbar-mobile">
    <a href="#" class="navbar-link navbar-link-active">Features</a>
    <a href="#" class="navbar-link">Marketplace</a>
    <a href="#" class="navbar-link">Products</a>
    <a href="#" class="navbar-link">Pricing</a>
    <a href="#" class="navbar-link">Contact</a>
    <a href="#" class="btn color-primary mt-2">Get Started</a>
  </div>
</div>

Requires: ux.min.css

<div>
  <input type="checkbox" id="nav-full-tw" class="hidden peer">
  <nav class="flex items-center w-full px-4 min-h-16 bg-base-100 border-b border-base-300 gap-2">
    <div class="flex items-center gap-2 shrink-0">
      <a href="#" class="flex items-center gap-2 no-underline" style="color:var(--color-base-content)">
        <img src="https://placehold.co/32x32/3b82f6/fff?text=E" alt="Logo" class="h-8 w-auto">
        <span class="font-bold text-lg">ERPlora</span>
      </a>
    </div>
    <div class="hidden md:flex items-center gap-1">
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-primary">Features</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70">Marketplace</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70">Products</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70">Pricing</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field text-base-content/70">Contact</a>
    </div>
    <div class="flex items-center gap-2 shrink-0 ml-auto">
      <select class="select select-sm" style="width: 70px;">
        <option>EN</option>
        <option>ES</option>
      </select>
      <a href="#" class="btn color-primary btn-sm hidden md:inline-flex">Get Started</a>
      <label for="nav-full-tw" class="menu-button md:hidden flex" aria-label="Menu">
        <span class="menu-button-lines">
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
          <span class="menu-button-line"></span>
        </span>
      </label>
    </div>
  </nav>
  <div class="hidden peer-checked:flex flex-col w-full bg-base-100 border-b border-base-300 p-3 gap-1 md:!hidden">
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-primary">Features</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Marketplace</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Products</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Pricing</a>
    <a href="#" class="flex w-full py-3 px-3 text-base font-medium no-underline rounded-field text-base-content/70 hover:bg-base-200">Contact</a>
    <a href="#" class="btn color-primary mt-2">Get Started</a>
  </div>
</div>

Requires: tw.min.css

// CSS-only! The hidden checkbox pattern handles everything.
// Resize the browser to see the responsive behavior:
// - Desktop (≥768px): inline links, hamburger hidden
// - Mobile (<768px): links hidden, hamburger visible, click toggles menu

<div class="relative rounded-box overflow-hidden" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); min-height: 200px;">
  <nav class="navbar navbar-transparent" style="position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: white;">
    <div class="navbar-start">
      <a href="#" class="navbar-brand" style="color: white;">
        <span class="navbar-brand-text">StartupKit</span>
      </a>
    </div>

    <div class="navbar-nav" style="display:flex">
      <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.8);">Features</a>
      <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.8);">Pricing</a>
      <a href="#" class="navbar-link" style="color: rgba(255,255,255,0.8);">About</a>
    </div>

    <div class="navbar-end">
      <a href="#" class="btn btn-outline btn-sm" style="color: white; border-color: rgba(255,255,255,0.3);">Log in</a>
      <a href="#" class="btn btn-sm" style="background: white; color: #0f172a;">Sign up</a>
    </div>
  </nav>

  <div style="padding: 6rem 2rem 2rem; text-align: center; color: white;">
    <h1 style="font-size: 2rem; font-weight: bold;">Build faster, ship sooner</h1>
    <p style="opacity: 0.7;">The modern way to build web applications</p>
  </div>
</div>

Requires: ux.min.css

<div class="relative rounded-box overflow-hidden" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); min-height: 200px;">
  <nav class="flex items-center w-full px-4 min-h-16 bg-transparent gap-2" style="position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: white;">
    <div class="flex items-center gap-2 shrink-0">
      <span class="font-bold text-lg text-white">StartupKit</span>
    </div>
    <div class="flex items-center gap-1">
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field" style="color:rgba(255,255,255,0.8);">Features</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field" style="color:rgba(255,255,255,0.8);">Pricing</a>
      <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium no-underline rounded-field" style="color:rgba(255,255,255,0.8);">About</a>
    </div>
    <div class="flex items-center gap-2 shrink-0 ml-auto">
      <a href="#" class="btn btn-outline btn-sm" style="color: white; border-color: rgba(255,255,255,0.3);">Log in</a>
      <a href="#" class="btn btn-sm" style="background: white; color: #0f172a;">Sign up</a>
    </div>
  </nav>
  <div style="padding: 6rem 2rem 2rem; text-align: center; color: white;">
    <h1 style="font-size: 2rem; font-weight: bold;">Build faster, ship sooner</h1>
    <p style="opacity: 0.7;">The modern way to build web applications</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for transparent overlay