JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" style="width:800px; height:355px; background-color:#fff; float:left;">

  <div>
    content 1
  </div>
  <div>
    content 2
  </div>
  <div>
    content 3
  </div>
   <div>
    content 4
  </div>
   <div>
    content 5
  </div>
   <div>
    content 6
  </div>
   <div>
    content 7
  </div>
   <div>
    content 8
  </div>
   <div>
    content 9
  </div>
    <div>
    content 10
  </div>
   <div>
    content 11
  </div>
   <div>
    content 12
  </div>
   <div>
    content 13
  </div>
   <div>
    content 14
  </div>
   <div>
    content 15
  </div>
   <div>
    content 16
  </div>
   <div>
    content 17
  </div>
    <div>
    content 18
  </div>
   <div>
    content 19
  </div>
   <div>
    content 20
  </div>  

</div>

CSS

/*.container{
  overflow-x: scroll;
  overflow-y: visible;
}*/

.container div{
  float: left;
  margin: 0px 0px 5px 5px;
  width: 22%;
  background-color:red;
  color:white;
  padding:3%;
  border: solid thin black;
}