JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
   <div class="main-1">
     <div class="box1"></div>
     <div class="box2"></div>
     </div>
     
     <div class="main-2">
     <div class="box3"></div>
     </div>
   </div>

CSS

*{ margin:0px; padding:0px;}
 .main-1{ height:200px; background:#060;}
 .box1{ height:200px; width:300px; background:#f00; float:left;}
 .box2{ height:200px; width:200px; background:#00f; float:left;}
 .main-2{ height:400px; width:800px; background:#000; overflow:hidden;}
 .box3{  height:200px; width:600px; background:#603; margin-top:20px;  }