JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="header"> header</div>
    <div class="container">
        <div class="controls"> controls
            <button class="btn btn-primary">Test button no css</button>
        </div>
        <div class="preview" id="phonePreview">
            <div>
                <button class="btn btn-primary">test button</button>
            </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;
}

JavaScript

$(document).ready(function() {          $.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
    var res = response.replace(/\./g,'#phonePreview .')
    console.debug (res);
    $('<style />').text(res).appendTo($('body'))
});
})