Back to Goodies

Breakpoint Tester

Preview HTML at multiple screen sizes side by side. Test responsive layouts with Tailwind breakpoint reference.

Viewports

HTML to test

<div style="font-family: system-ui; padding: 24px; color: #e2e8f0;">
  <h1 style="font-size: 24px; font-weight: bold; margin-bottom: 8px;">Responsive Test</h1>
  <p style="color: #94a3b8; margin-bottom: 16px;">Resize or edit the HTML to test your layouts.</p>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;">
    <div style="background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.3); border-radius: 8px; padding: 16px; text-align: center;">Card 1</div>
    <div style="background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.3); border-radius: 8px; padding: 16px; text-align: center;">Card 2</div>
    <div style="background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.3); border-radius: 8px; padding: 16px; text-align: center;">Card 3</div>
    <div style="background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.3); border-radius: 8px; padding: 16px; text-align: center;">Card 4</div>
  </div>
</div>

Preview

375px

Responsive Test

Resize or edit the HTML to test your layouts.

Card 1

Card 2

Card 3

Card 4

Mobile M

375px

768px

Responsive Test

Resize or edit the HTML to test your layouts.

Card 1

Card 2

Card 3

Card 4

Tablet

768px

md (768px)

1440px

Responsive Test

Resize or edit the HTML to test your layouts.

Card 1

Card 2

Card 3

Card 4

Desktop

1440px

xl (1280px)

Show Tailwind Reference

Tailwind Breakpoints

sm640px

md768px

lg1024px

xl1280px

2xl1536px

Prefix	Min-width	CSS
sm:	640px
md:	768px
lg:	1024px
xl:	1280px
2xl:	1536px

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

View all Goodies

Contrast Checker

Check WCAG contrast ratios between two colors. Verify AA and AAA compliance in real time.

CSS Grid Generator

Build CSS grid layouts visually. Adjust columns, rows and gaps, then copy the code.

Spacing System Generator

Build a consistent spacing scale from a base unit. Generate linear, geometric or Fibonacci scales with CSS variables and Tailwind config.

SVG Animation Generator

Generate animated SVG graphics — spinners, loaders, shapes, waves and more. Customize colors, speed and size, then copy or download.

Tailwind Color Converter

Paste any color and find the closest Tailwind CSS class instantly. Supports hex, rgb and hsl.

Clamp Calculator

Generate responsive CSS clamp() values for fluid typography and spacing. Set min/max viewport and values, preview at every breakpoint.

View all Goodies