The Horatian Archive
Home
HTML Preview
live HTML/CSS/JS editor with instant preview
Side by Side
Stacked
HTML Boilerplate
Flexbox Template
Grid Template
Form Template
Clear
Copy Code
<style> body { font-family: sans-serif; padding: 20px; background: #f0f0f0; } h1 { color: #7b68ee; } .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 400px; } button { background: #7b68ee; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 16px; } button:hover { background: #6a5acd; } </style> <div class="card"> <h1>Hello World!</h1> <p>Edit this code and see the preview update in real-time.</p> <button onclick="this.textContent='Clicked!'">Click Me</button> </div>