htmlfreecodes.
Menu

A good first building block

Colored and labelled text boxes

Three readable message panels that communicate their purpose with text and borders.

HTMLCSSNo dependencies
Edit in playground

Live preview

Explore the result below

HTML

<main><h1>Give a message a little shape</h1><section class="message info"><h2>Information</h2><p>Your draft is saved on this device in this imaginary example.</p></section><section class="message success"><h2>Success</h2><p>The example is ready to explore.</p></section><section class="message warning"><h2>Review needed</h2><p>Check your real content before publishing.</p></section></main>
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}label{display:block;margin:16px 0 6px}input:not([type=checkbox]),select,textarea{max-width:100%;width:100%;padding:10px;border:1px solid #afbddd;border-radius:8px}button:disabled{opacity:.5;cursor:default}.message{padding:16px;margin:16px 0;border:1px solid;border-left-width:5px;border-radius:10px}.message h2{font-size:17px;margin:0 0 8px}.message p{margin:0}.info{background:#edf1ff;border-color:#3658bf;color:#18223b}.success{background:#e8f4ee;border-color:#267357;color:#163c2d}.warning{background:#fff5df;border-color:#916410;color:#51380a}
</style>
</head>
<body>
<main><h1>Give a message a little shape</h1><section class="message info"><h2>Information</h2><p>Your draft is saved on this device in this imaginary example.</p></section><section class="message success"><h2>Success</h2><p>The example is ready to explore.</p></section><section class="message warning"><h2>Review needed</h2><p>Check your real content before publishing.</p></section></main>
<script>

</script>
</body>
</html>

A little guide to making it yours

  1. Copy the code and save it in a file named example.html.
  2. Open the file in your browser to see the complete example.
  3. Change the text and structure in the HTML.
  4. Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

Each panel has a heading and a distinct border, so meaning does not depend on color alone. These are static example messages, not live storage or publication claims. Use a status region only when you need to announce an actual changing result. Change colors in the three CSS classes and verify text contrast.

Historical purpose: The stage-one 2014 archive recovery verified this exact detail purpose. This is an original modern implementation; no archived third-party code, credit link, remote script or guessed numeric preview mapping is reused.

Troubleshooting and limits

Messages include text headings so meaning does not rely on color. They are static examples, not evidence of a successful submission. When changing colors, check foreground/background contrast and keep informative headings.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going