JSFiddle - React, Tailwind, and code Playground

HTML

<header> 
    <h1>blahblah.com</h1> 
    <time>THE TIME</time> 
    <div id="controls"> 
        <p>DISPLAY CONTROLS</p> 
    </div> 
</header> 
<p>next element</p>

CSS

* { 
    margin: 0px; 
    padding: 0px; 
} 
header { 
    background: black; 
    color: white; 
    width: 100%; 
    font-family: wendy;
    overflow: hidden;
    text-align: center;
} 
header h1 { 
    font-size: 40px; 
    margin-left: 10px; 
    float: left;
} 
header time { 
    font-size: 30px; 
} 
header #controls { 
    float: right;    
} 
#controls p { 
    font-size: 20px; 
}