0px - Mobile | Mobile View SM View MD View LG View XL View
1. Responsive Grid System
Resize your browser to see the grid adapt
Card 1
1 Column2 Columns3 Columns4 Columns
Card 2
1 Column2 Columns3 Columns4 Columns
Card 3
1 Column2 Columns3 Columns4 Columns
Card 4
1 Column2 Columns3 Columns4 Columns
Card 5
1 Column2 Columns3 Columns4 Columns
Card 6
1 Column2 Columns3 Columns4 Columns
Card 7
1 Column2 Columns3 Columns4 Columns
Card 8
1 Column2 Columns3 Columns4 Columns
2. Responsive Typography
This is a Heading 1
This is a Heading 2
This is a Heading 3
This is body text that scales appropriately across different screen sizes. Notice how the font size and line height adjust to maintain optimal readability on each device type.
3. Flexible Card Layout
Adaptive Card
This card stacks vertically on mobile and displays horizontally on larger screens.
4. Adaptive Spacing
Dynamic Padding
This box has padding that increases with screen size:
- Mobile: 16px (p-4)
- Small: 24px (sm:p-6)
- Medium: 32px (md:p-8)
- Large: 40px (lg:p-10)
Dynamic Margins
Item 1
Item 2
Item 3
5. Responsive Navigation
6. Conditional Content
📱 This content is only visible on mobile devices
📱 This content is only visible on small tablets
💻 This content is only visible on tablets
🖥️ This content is only visible on desktop
🖥️ This content is only visible on large screens
✅ This content is always visible
7. Touch-Friendly Buttons
8. Responsive Table
User 1
Email: user1@example.com
Role: Admin
Status: Active
User 2
Email: user2@example.com
Role: Admin
Status: Active
User 3
Email: user3@example.com
Role: Admin
Status: Active
| Name | Role | Status | |
|---|---|---|---|
| User 1 | user1@example.com | Admin | Active |
| User 2 | user2@example.com | Admin | Active |
| User 3 | user3@example.com | Admin | Active |