Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head style="display: block; width: 50%; height: 100%; float: left;">
<meta charset="UTF-8">
<title>Live CSS</title>
<style>
* {
box-sizing: border-box;
}
#style {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 32px;
background: #fafafa;
font-family: monospace;
font-size: 32px;
}
#style:focus {
outline: 0;
}
#body {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 100%;
padding: 16px;
margin: 0;
float: left;
}
.box {
position: relative;
width: 85%;
height: 85%;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0 0 6px #999;
}
.box:before {
content: ".box";
position: absolute;
top: -35px;
display: inline-block;
font-family: monospace;
font-size: 20px;
}
</style>
<style id="style" contenteditable="true">
.box { ... }
</style>
</head>
<body id="body">
<div class="box"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.