rebelchris/index.html

## index.html
<html>
  <head>
    <meta charset="UTF-8" />
    <title>No-div playground</title>
    <meta name="description" content="A cool no-div playground" />
    <meta name="author" content="Daily Dev Tips" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
      }
      textarea {
        height: 66px;
      }
      iframe {
        width: 200px;
        height: 200px;
        border: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <textarea id="cssBody" placeholder="background: red;"></textarea>
        <br />
        <textarea id="cssBefore" placeholder="content: '🤟';"></textarea>
        <br />
        <textarea id="cssAfter" placeholder="content: '🤟';"></textarea>
      </div>
      <iframe id="iFrame"></iframe>
    </div>
    <script type="text/javascript">
      const cssBody = document.getElementById("cssBody");
      const cssBefore = document.getElementById("cssBefore");
      const cssAfter = document.getElementById("cssAfter");
      const iFrame = document.getElementById("iFrame").contentWindow.document;

      document.addEventListener("keyup", (event) => {
        if (
          event.target !== cssBody &&
          event.target !== cssBefore &&
          event.target !== cssAfter
        ) {
          return;
        }
        iFrame.open();
        iFrame.writeln(`
        <style>
        body { ${cssBody.value} }
        body:before { ${cssBefore.value} }
        body:after { ${cssAfter.value} }
        </style>`);
        iFrame.close();
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>No-div playground</title>
	<meta name="description" content="A cool no-div playground" />
	<meta name="author" content="Daily Dev Tips" />
	<link rel="icon" href="/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
	.container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	}
	textarea {
	height: 66px;
	}
	iframe {
	width: 200px;
	height: 200px;
	border: 5px solid #000;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div>
	<textarea id="cssBody" placeholder="background: red;"></textarea>
	<br />
	<textarea id="cssBefore" placeholder="content: '🤟';"></textarea>
	<br />
	<textarea id="cssAfter" placeholder="content: '🤟';"></textarea>
	</div>
	<iframe id="iFrame"></iframe>
	</div>
	<script type="text/javascript">
	const cssBody = document.getElementById("cssBody");
	const cssBefore = document.getElementById("cssBefore");
	const cssAfter = document.getElementById("cssAfter");
	const iFrame = document.getElementById("iFrame").contentWindow.document;

	document.addEventListener("keyup", (event) => {
	if (
	event.target !== cssBody &&
	event.target !== cssBefore &&
	event.target !== cssAfter
	) {
	return;
	}
	iFrame.open();
	iFrame.writeln(`
	<style>
	body { ${cssBody.value} }
	body:before { ${cssBefore.value} }
	body:after { ${cssAfter.value} }
	</style>`);
	iFrame.close();
	});
	</script>
	</body>
	</html>