all

<nav className="fixed top-0 left-0 right-0 z-40 px-8 h-20 flex items-center justify-between bg-background/80 backdrop-blur-md border-b border-border/50">
  <div className="text-2xl font-black tracking-tighter text-foreground">
    SnapJSX<span className="text-primary">.</span>
  </div>

  <div className="hidden md:flex items-center gap-8">
    <a href="#" className="text-xs font-black uppercase tracking-widest text-muted-foreground hover:text-primary transition-colors">Products</a>
    <a href="#" className="text-xs font-black uppercase tracking-widest text-muted-foreground hover:text-primary transition-colors">Pricing</a>
    <a href="#" className="text-xs font-black uppercase tracking-widest text-muted-foreground hover:text-primary transition-colors">Docs</a>
  </div>

  <div className="flex items-center gap-4">
    <button className="px-5 py-2 rounded-xl bg-primary text-primary-foreground text-[10px] font-black uppercase tracking-widest shadow-lg shadow-primary/20">
      Get Started
    </button>
  </div>
</nav>

<div className="flex justify-center items-center gap-4">
  <button className="px-4 py-2 rounded-lg bg-accent text-sm font-medium hover:bg-accent/80 transition-colors disabled:opacity-50">
    Previous
  </button>

  <div className="flex items-center gap-2 text-sm font-medium">
    Page
    <input
      type="text"
      value="1"
      readOnly
      className="w-12 h-9 text-center rounded-md border border-input bg-background focus:ring-1 focus:ring-primary outline-none"
    />
    of 10
  </div>

  <button className="px-4 py-2 rounded-lg bg-accent text-sm font-medium hover:bg-accent/80 transition-colors disabled:opacity-50">
    Next
  </button>
</div>

<nav className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest">
  <a href="#" className="text-muted-foreground hover:text-primary transition-colors">Home</a>
  <span className="text-muted-foreground/30">/</span>
  <a href="#" className="text-muted-foreground hover:text-primary transition-colors">Library</a>
  <span className="text-muted-foreground/30">/</span>
  <span className="text-foreground">Components</span>
</nav>

<div className="flex items-center gap-1 p-1 bg-muted/50 rounded-2xl w-fit">
  <button className="px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest bg-primary text-primary-foreground shadow-lg shadow-primary/20">Profile</button>
  <button className="px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors">Settings</button>
  <button className="px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors">Billing</button>
</div>

<div className="flex items-center gap-2 p-1 bg-muted/30 rounded-full w-fit">
  <button className="px-5 py-2 rounded-full text-xs font-black uppercase tracking-widest bg-primary text-primary-foreground shadow-lg shadow-primary/20">Overview</button>
  <button className="px-5 py-2 rounded-full text-xs font-black uppercase tracking-widest text-muted-foreground">Integration</button>
  <button className="px-5 py-2 rounded-full text-xs font-black uppercase tracking-widest text-muted-foreground">API</button>
</div>