JSFiddle - React, Tailwind, and code Playground

by kmouse

HTML

<div id="window">
  <div id="content">
    <div style="width:20%;background:red;">1</div>
    <div style="width:60%;background:green;">2</div>
    <div style="width:20%;background:blue;">3</div>
  </div>
  <div id="content2">
    <div style="width:20%;background:red;">1</div>
    <div style="width:60%;background:green;">2</div>
    <div style="width:20%;background:blue;">3</div>
  </div>
</div>

CSS

div#window {
  display: flex;
  width: 100%;
  height: 100%;
  background: white;
  box-sizing: border-box;
  overflow: hidden auto;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
}

div#content,
div#content2 {
  display: flex;
  position: relative;
  height: 128px;
  width: 40%;
  text-align: center;
  box-sizing: border-box;
  flex-direction: row;
}