English
Spanish
French
German
Italian
Russian
Breakpoint Visibility
This message changes based on screen size:
🔹 Mobile View (sm and below)
🟢 Tablet View (sm ≥ width < md)
🟡 Small Desktop (md ≥ width < lg)
🟣 Large Desktop View (lg and above)
Responsive Grid
Columns change at sm, md breakpoints.
Natalie Watson
Content Strategist
Layout adjusts from column → row on sm breakpoint.
Responsive Button Stack
Stacked on mobile, inline on tablet and above.
Responsive Heading
Font size adjusts from xs → base across breakpoints.
Sidebar Simulation
Menu
- Dashboard
- Analytics
- Reports
This main content shifts beside the menu on large screens.
Try resizing your browser to test responsiveness.
Breakpoint Hidden Example
The paragraph below hides on md and above.
This only appears on mobile and tablet!
Responsive Image
Image width adapts at sm, md, lg.
Recent Orders
| Order ID | Date | Total |
|---|---|---|
| #1001 | Jun 12, 2023 | $129.99 |
| #1002 | Jun 11, 2023 | $89.99 |
| #1003 | Jun 10, 2023 | $249.99 |
1. Responsive Grid Column Reconfiguration
This example demonstrates how a grid layout can rearrange its columns based on screen size, useful for product listings or content blocks.
Uses `grid-cols-1`, `sm:grid-cols-2`, `lg:grid-cols-3` and `hidden sm:block`, `hidden lg:block` for dynamic column changes and visibility.
2. Adaptive Image Sizes & Visibility
Showcasing how images can scale and hide/show at different breakpoints for optimized mobile and desktop experiences.
Demonstrates `w-`, `h-` resizing, and `hidden sm:block`, `hidden lg:block` for responsive image displays.
3. Dynamic Navigation Menu (Collapsed/Expanded)
A common pattern where a mobile navigation (e.g., hamburger menu) expands to a full menu on larger screens.
Utilizes `lg:hidden`, `lg:flex` for responsive visibility, and Alpine.js (`x-data`, `x-show`, `x-bind:class`) for the toggle.
4. Responsive Spacing (Padding/Margin)
Demonstrates how padding or margin around elements can change dynamically based on screen size, providing better visual spacing.
This content block's padding increases as the screen size grows. This helps to maintain a comfortable reading experience and visual balance on larger displays.
The top margin of this box also adjusts, pushing it further away from the element above on larger screens.
Applies responsive spacing like `p-4 sm:p-6 lg:p-10` and `mt-4 sm:mt-6 lg:mt-8`.
5. Conditional Content Display (e.g., Detailed Info)
Elements or information that only appear on larger screens to avoid clutter on mobile devices.
Order Summary
Uses `hidden md:flex` and `hidden lg:flex` to show more detailed summary information on larger screens.
6. Typography Variations for Readability
Adapting font sizes and line heights for optimal readability across different screen sizes.
Responsive Headline
This paragraph's font size and line height are carefully tuned to ensure excellent readability whether you're Browse on a small mobile device, a tablet, or a large desktop monitor. The goal is to provide a comfortable and engaging reading experience for all users.
Applies responsive typography utilities like `text-xl md:text-2xl lg:text-3xl` and `leading-relaxed md:leading-normal`.