JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow: hidden;">

 <div class="wrapper">
  <div class="inwrapper">
        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>
  </div>
 </div> 



</div>

CSS

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.inwrapper{
    float:left;
    overflow: hidden;
    min-width: 830px;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid black;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid black;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid black;
}

}