JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="wrap">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
<div class="clearfix"></div>
<div>Next</div>

CSS

.wrap {
  width: 50%;
}
.container {
    background: red;
    padding: 10px;
    width:100%;
    box-sizing:border-box;
    display: block;
    overflow: auto;
    white-space:nowrap;
    }
.child {
    width: 100px;
    height: 100px;
    box-sizing:border-box;
    display:inline-block;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}