Tailwind UI
Beautiful UI components crafted with Tailwind CSS
Color Palette
Typography — Satoshi
Build faster with beautiful components
Marketing sections that convert
Application UI patterns
Feature highlight
Card title
Overline label
Tailwind UI provides professionally designed, fully responsive components built with Tailwind CSS. From marketing pages to complex application interfaces — ship polished UI in record time.
Supporting text · sm size · slate-500
Buttons
Solid
Sky-600 background, white text, subtle shadow-sm, 8px radius
Outline
White bg, slate-300 border, hover slate-50
Soft
Light sky background with sky-700 text
Dark Hero
Buttons on dark marketing hero sections
Form Inputs
Badges & Tags
Surfaces & Cards
White Card
Clean white card with ring-1 ring-slate-200 and shadow-sm.
Sky Accent
Light sky-50 background for highlighted feature sections.
Slate Section
Subtle slate-50 background for alternating page sections.
Dark Hero
Slate-900 background for marketing hero blocks.
Border Radius Scale
6px
8px
12px
16px
pill
Component Example
Marketing Pages
Heroes, feature grids, pricing tables, and CTAs.
Application UI
Dashboards, settings, tables, and form layouts.
Production Polish
Pixel-perfect spacing, shadows, and responsive behavior.
Design Tokens
| Token | Value | Usage |
|---|---|---|
slate-900 | #0F172A | Primary text |
sky-600 | #0284C7 | Primary accent |
slate-500 | #64748B | Muted text |
slate-200 | #E2E8F0 | Borders & rings |
slate-50 | #F8FAFC | Section backgrounds |
shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle elevation |
rounded-lg | 8px | Default component radius |