Retour aux Goodies

Testeur de breakpoints

Previsualiser du HTML a plusieurs tailles d'ecran cote a cote. Testez vos layouts responsives avec la reference des breakpoints Tailwind.

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

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Verificateur de contraste

Verifiez les ratios de contraste WCAG entre deux couleurs. Conformite AA et AAA en temps reel.

Flexbox Playground

Construisez des layouts flexbox visuellement. Controlez direction, justify, align, wrap, gap et les proprietes de chaque item.

Editeur d'animations CSS

Construisez des animations CSS keyframes visuellement avec un editeur de timeline. Export CSS et Tailwind.

Generateur d'effets texte

Creez des effets de texte — gradient, stroke, neon glow, ombre longue, retro 3D et emboss.

Generateur d'ombres

Creez des ombres CSS avec un apercu en temps reel. Affinez chaque parametre.

Generateur d'animations SVG

Generez des graphiques SVG animes — spinners, loaders, formes, vagues et plus. Personnalisez couleurs, vitesse et taille, puis copiez ou telechargez.

Voir tous les Goodies