JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<style contenteditable>
    .box-a {
        background: #ff0066;
        height: 200px;
        width: 300px;
    }
    .box-b {
        background: #66f600;
        height: 200px;
        width: 200px;
    }
    .box-c {
        background: #0066ff;
        height: 200px;
        width: 100px;
    }
</style>
<div class="wrapper">
     <h2 contenteditable="true">Let's Style These Boxes!</h2>

    <div class="box-a box"></div>
    <div class="box-b box"></div>
    <div class="box-c box"></div>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font: 1em/1.5 sans-serif;
    padding-top: 10px;
    background: #f7f7f7;
}
style[contenteditable] {
    outline: none;
    display: block;
    font: 1.2em/1.8 monospace;
    background: #272822;
    color: #f8f8f3;
    height: 200px;
    padding-left: 30px;
    overflow: auto;
    margin-bottom: 50px;
    border-radius: 5px;
    white-space: pre;
}
.wrapper, style[contenteditable] {
    margin: 10px;
}
.box {
    display: inline-block;
    margin: 10px 10px 0 0;
}