JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<h1 id = "header">
        I FIXED IT SO NONE OF YOUR CONTENT SQUISHES TOGETHER. DON'T USE PERCENTAGES TO SPECIFY WIDTH
    </h1>
    <div id = "controls">
        <div class = "control">Control</div>
        <div class = "control">Control</div>
        <div class = "control">Control</div>
        <div class = "control">Control</div>
    </div>
    <div id = "people">
        <p>#1</p>
        <p>#2</p>
        <p>#3</p>
        <p>#4</p>
        <p>#5</p>
        <p>#6</p>
        <p>#7</p>
    </div>

CSS

html,body{padding:0;margin:0;height:100%; min-width:600px;}
#header{ 
    background:#F00;
    height:50px;
    margin:0;
    padding:0;
    position:fixed;
    left:0;
    right:0;
    min-width:600px;
}
#controls{
    background:#0F0;
    position:fixed;
    top:50px;
    right:0;
    left:0;
    min-width:600px;
}
.control{ 
    background:#00F;
    display:inline-block;
    margin:10px;       
    width:80px;
}
#people{
    padding-top:100px;
}