Home
/
ProDevTools
Search tools...
⌘ K
Load Sample
Clear
☀️ Light
🌙 Dark
HTML Source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; } h1 { color: #2563eb; } .card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; } button { background: #2563eb; color: white; border: none; padding: 0.5rem 1.25rem; border-radius: 6px; cursor: pointer; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; text-align: left; } th { background: #f8fafc; } </style> </head> <body> <h1>Hello, ProDevTools!</h1> <p>This is a live HTML preview. Edit the code on the left to see changes instantly.</p> <div class="card"> <h2>Sample Card</h2> <p>A styled component using plain CSS.</p> <button onclick="alert('Clicked!')">Click Me</button> </div> <table> <tr><th>Name</th><th>Role</th><th>Status</th></tr> <tr><td>Alice</td><td>Engineer</td><td>Active</td></tr> <tr><td>Bob</td><td>Designer</td><td>Active</td></tr> </table> </body> </html>
Preview