HTML Content
Hide
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; padding: 1rem; color: #e2e8f0; background: #0f172a; } h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } p { color: #94a3b8; line-height: 1.6; } .card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; margin-top: 1rem; } </style> </head> <body> <h1>Responsive Test</h1> <p>Paste your HTML here to preview at different viewport sizes.</p> <div class="card"> <p>This is a sample card component. Try editing this HTML or replacing it with your own.</p> </div> </body> </html>
Single
Grid
Device frame
Device Presets
iPhone SE
375×667
iPhone 14
390×844
iPad
768×1024
iPad Pro
1024×1366
Laptop
1366×768
Desktop
1920×1080
Width
×
Height
Custom
Zoom:
25%
50%
75%
100%
iPhone 14
390×844
</>
browserutils
Responsive Design Tester