JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div_1">
  <div class="div_3">
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
  </div>
</div>

CSS

.div_1
{
  height: 350px;
  width: 350px;
  margin: auto;
  overflow-y: hidden;
  overflow-x: auto;
}

.div_3
{
  height: 350px;
  width: 500px;
}

.div_2
{
  height: 100px;
  width: 100px;
  float: left;
}
.div_2:nth-child(even) {
  background-color:red;
}
.div_2:nth-child(odd) {
  background-color:blue;
}