JSFiddle - React, Tailwind, and code Playground

by bvvell

HTML

<div class="wrapper">
    <div class="green">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="blue"></div>
    </div>
</div>

CSS

.wrapper{
    width:700px;   
    background: gray;
    border:3px solid black;
}
.green{
    width:500px;
    overflow:hidden;
    border:3px solid green;
    margin:0 auto;
}
.red{
    height:20px;
    width:50px;
    float:left;
    border:3px solid red;
}
.yellow{
    height:20px;
    width:50px;
    float:right;
    border:3px solid yellow;
}
.blue{
    height:20px;
    width:50px;
    margin: 0 100px;
    border:3px solid blue;    
}