JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="header"> header</div>
    <div class="container">
        <div class="controls"> controls</div>
        <div class="preview">
            <div class="phone"> phone: <br />i want a whole new css file for this one, which is also used for the real mobile app</div>            
        </div>        
    </div>
</div>

CSS

.header{
    height: 100px;
    width: 700px;
    background-color: yellow;
    text-align: center;
}
.container{
    width: 700px;
    background-color: red;  

}
.controls{
    height: 500px;
    width: 50%;
    background-color: green;
    float: left;
}
.preview{
    float: left;
    height: 500px;
    width: 50%;
    background-color: pink;
}
.phone{
    height: 400px;
    width: 250px;
    background-color: gray;    
    margin: 50px auto;
}