I Cloned Arc Browser's Sidebar in 50 Lines of HTML — Pastel Gradient + Glass Sidebar

#design #tailwindcss #html #beginners

🌐 Live demo: https://dev48v.infy.uk/design/day4-arc-tabs.html

Day 4 of DesignFromZero. 50 famous UIs cloned · one HTML file each · no build setup.

Today: Arc browser's vertical tab sidebar. The browser UI that sparked a thousand redesign threads. Pastel gradient + glass sidebar + mac window dots + ⌘T command pill + colored letter avatars.

The 8 ingredients

Diagonal pastel gradient bg — pink/violet/indigo
Glass sidebar — bg-white/40 backdrop-blur floats over the gradient
macOS window dots — three colored 12px circles top-left
Command bar pill — single pill with 🔍 + ⌘T hint, always visible
Section headers — tiny uppercase greyed labels (Pinned / Today / 📂 Folder)
Tab rows — colored letter avatar + label · active = white bg + soft shadow
Unread dot — 2px colored dot on the right of a tab row
Rounded main pane — rounded-l-2xl + margin so the gradient peeks through

That's the entire design language.

The crucial trick — backdrop-blur over a gradient

The signature Arc effect:

<body style="background: linear-gradient(160deg, #fce7f3, #ddd6fe, #c7d2fe);">
  <aside class="bg-white/40 backdrop-blur rounded-2xl">
    ...
  </aside>
</body>

bg-white/40 is 40% white. backdrop-blur blurs whatever's BEHIND the element. Without the gradient bleeding through, the sidebar would look flat — with it, you get the macOS Big Sur translucency that defines modern app shells.

Tab row pattern

<div class="rounded-lg px-3 py-2 flex items-center gap-2 bg-white shadow">
  <span class="w-5 h-5 bg-slate-900 text-white rounded text-[10px]
               flex items-center justify-center font-bold">G</span>
  <span class="font-semibold">Gmail</span>
</div>

Active tab: white background + soft shadow
Hover tab: translucent white
5×5 colored square = first letter of brand name (G=Gmail, N=Notion, F=Figma)

The colored letter pattern came from Slack, was perfected by Notion, and Arc made it the default for browser tabs. Universal SaaS shorthand now.

Section headers

<div class="text-[10px] uppercase tracking-widest text-slate-500 font-bold px-2">
  Pinned
</div>

Tiny 10px uppercase greyed labels group items. Same exact style for Pinned / Today / Teams / Folders. Visual consistency = mental shortcut.