405 guides · updated daily

The Empire UI blog

Practical guides on UI styles and effects - every article ships free, working React & Tailwind code.

All UI Styles Components React Tailwind Animation Tools Comparisons Design Systems Advanced

#react #css #tailwind #animation #glassmorphism #next.js #design #performance #accessibility #dark mode #css variables #framer motion #neumorphism #responsive #dashboard #saas #ecommerce #landing page #button #card #form #navigation #typography #gradient #patterns

9 articles · #layout · showing 1-9

Developer portfolio grid layout with project cards on dark background

2026-08-28 · 8 min read

Portfolio Layout in Tailwind: Grid, Project Cards, About Section

Build a polished developer portfolio with Tailwind CSS - responsive project grid, animated cards, and an about section that doesn't look like every other dev site.

tailwindportfolio

code editor screen showing blog layout development work

2026-08-27 · 8 min read

Blog Layout in Tailwind: Article Page, Card Grid, Sidebar

Build a full blog layout in Tailwind - article page with typography, responsive card grid, and a sticky sidebar - with copy-paste Next.js code.

Frosted glass blog card layout with soft colorful background blur

2026-08-13 · 8 min read

Glassmorphism Blog Layout: Frosted Article Cards and Reading View

Build a frosted-glass blog layout in React and Next.js - article grid cards, single-post reading view, and the backdrop-filter tricks that make it feel real.

glassmorphismblog

dark SaaS dashboard UI with data charts and sidebar layout

2026-08-04 · 9 min read

SaaS Dashboard UI Design: Layout, Data Density and Visual Hierarchy

Build SaaS dashboards that actually work - covering layout grids, data density trade-offs, visual hierarchy, and the component patterns that keep users oriented.

colorful geometric CSS layout grid with responsive proportions

2026-07-27 · 8 min read

CSS aspect-ratio: Responsive Images, Videos and Cards Made Easy

Master CSS aspect-ratio in 2026 - control image, video, and card proportions without padding hacks. Responsive layouts that just work, explained clearly.

aspect-ratiocss

split screen code editor layout with resizable panel divider

2026-07-24 · 8 min read

Resizable Panels in React: Split View, Drag to Resize

Build drag-to-resize split panels in React from scratch or with react-resizable-panels. Covers split views, keyboard access, and production layout patterns.

resizablepanels

Dark admin dashboard with sidebar navigation and data grid on screen

2026-07-18 · 8 min read

Tailwind Dashboard Layout: Sidebar, Header and Content Grid

Build a production Tailwind dashboard layout with a collapsible sidebar, sticky header, and responsive content grid - copy-paste React code included.

tailwinddashboard

code editor open on a dark screen showing a sidebar layout component

2026-07-18 · 8 min read

Tailwind Sidebar Layout: Collapsible, Responsive, Accessible

Build a collapsible, accessible Tailwind sidebar layout from scratch - responsive breakpoints, keyboard nav, ARIA roles, and real code you can drop in today.

tailwindsidebar

Clean CSS grid layout with evenly spaced design system tokens on screen

2026-06-13 · 8 min read

CSS Spacing System: 8px Grid, rem vs px, and Container Queries

Master the 8px spacing grid, know when to use rem over px, and write container queries that actually hold up in production layouts.

spacingcss grid

Free components in 41 visual styles

React & Tailwind, copy-paste ready. Glassmorphism, neobrutalism, Y2K and more.

Browse components →