- Free forever
- No sign-up
- Instant results
Reference Archives
All Reference Calculators
Breakpoint Reference
Tailwind, Bootstrap & common breakpoints
| Name | Tailwind | Bootstrap | Width |
|---|---|---|---|
| xs / mobile | — | < 576px | max 575px |
| sm | 640px | ≥ 576px | min 640px |
| md | 768px | ≥ 768px | min 768px |
| lg | 1024px | ≥ 992px | min 1024px |
| xl | 1280px | ≥ 1200px | min 1280px |
| 2xl | 1536px | ≥ 1400px | min 1536px |
HTTP Status Codes
Quick lookup — click any code to copy
| Code | Name | Docs |
|---|
Transition Duration Guide
Right duration for every interaction type
| Interaction | Duration | Easing |
|---|---|---|
| Hover state (button, link) | 100–150ms | ease |
| Tooltip / popover appear | 150–200ms | ease |
| Dropdown / menu open | 200–250ms | ease-out-expo |
| Modal / drawer open | 250–350ms | ease-out-back |
| Page transition | 300–500ms | ease |
| Skeleton / loading pulse | 1000–1500ms | infinite |
| Scroll-triggered reveal | 400–600ms | ease-out-expo |
💡 Rule of thumb: anything faster than 100ms feels instant. Anything slower than 500ms feels sluggish. Stay in that window.
Optimal Line Length
Ideal container width for readability
Recommended CSS
—
Approximate equivalent: —
The 45–75 character rule is the gold standard for body text readability.