JSFiddle - React, Tailwind, and code Playground

by jondlm

HTML

<header>
    <span>Text</span>
    <span style="float:right;">This is where my icons could go</span>
</header>

<div id="container">
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
</div>

CSS

header{
    font-size: 20px;
 	height: 20px;
    background-color:lightgrey;
    padding: 15px 10px 15px 10px;
    min-width:300px;
}
#container{
    font-size:55px;
    color:white;
    text-align:center;
    width: 500px;
    margin: 0 auto 0 auto;
 	background-color:black;   
}

JavaScript

for (var i=0;i<10;i++){
    var x = document.getElementById("container").innerHTML;
    x += '<div></div>';
    document.getElementById("container").innerHTML = x;
}