JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class='menu_topo_geral'>
  <div class='bg-grey-2'>MENU 1</div>
  <div>MENU 2</div>
  <div>MENU 3</div>
  <div>MENU 4</div>
  <div>MENU 5</div>
  <div>MENU 6</div>
  <div>MENU 7</div>
  <div>MENU 8</div>
  <div>MENU 9</div>
  <div>MENU 10</div>
  <div>MENU 11</div>
  <div>MENU 12</div>
</div>
</div>
</div>

CSS

.container {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

.menu_topo_geral {
    overflow-y: hidden;
    width: 200%;
    height: 50px;
    background: #616161;
}
.menu_topo_geral div {
    cursor: pointer;
    text-align:center;
    line-height:50px;
    float: left;
    border: 0 solid #484848;
    border-right-width: 1px;
    color:#FFFFFF;
    padding: 0 10px 0 10px;
}
.menu_topo_geral div:hover {
    background: #484848;
}
.menu_topo_geral div:active {
    background: #323232;
}
.bottom {
    height: 60%;
    background-color: blue;
}