css-base Refactored Demos

NETFLIX

Netflix

Dark cinematic UI with hero banners, content rows, and hover-expand cards.

dark mode subgrid :has()

amazon

Amazon

E-commerce layout with search bar, product grid, ratings, and lightning deals.

grid nesting color-mix()

💬

WhatsApp

Chat interface with message bubbles, contact sidebar, and read receipts.

flexbox @container attr()

⊞

Windows 11

Fluent Design with mica-like surfaces, rounded corners, and centered taskbar.

backdrop-filter light-dark() tokens

🍎

macOS

Clean Apple aesthetic with toolbar, sidebar, and SF-style typography.

typography sidebar toolbar

🎵

Spotify

Music player with sidebar nav, playlist grid, and now-playing bar.

dark accent color sticky

slack

Slack

Workspace layout with channel sidebar, message threads, and thread panel.

sidebar threads responsive

🐙

GitHub

Repo page with file browser, commit history, and contribution graph.

tables badges dark mode

📊

Dashboard

Analytics dashboard with stat cards, charts placeholder, and data tables.

cards tables grid

$ echo "hello"

Terminal

Terminal emulator with syntax highlighting, prompt styling, and output blocks.

monospace syntax code blocks