JSFiddle - React, Tailwind, and code Playground

by ahe128

HTML

<div id="main">

<div id="coloumn1">
  <div id="row1_1">
  </div>
   <div id="row1_2">
  </div>
    <div id="row1_3">
  </div>
</div>

<div id=coloumn2>
 <div id="row2_1">
  </div>
   <div id="row2_2">
  </div>
</div>

</div>

CSS

#main{
  height:500px;
  width:500px;
  border:1px solid black;

  margin:10px;
}
#coloumn1{
  height:400px;
  width:200px;
  float:left;
margin:10px;
   border:2px solid black;
}
#row1_1{
  height:150px;
  width:150px;
   border:1px solid black;
   margin:10px;
}
#row1_2{
  height:100px;
  width:150px;
margin:10px;
 border:1px solid black;
}
#row1_3{
  height:50px;
  width:150px;
margin:10px;
 border:1px solid black;
}



#coloumn2{
  height:400px;
  width:200px;
  float:left;
   border:2px solid black;
   margin:10px;
}
#row2_1{
  height:200px;
  width:150px;
   border:1px solid black;
   margin:10px;
}
#row2_2{
  height:150px;
  width:150px;
margin:10px;
 border:1px solid black;
}