JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="thingOuterContainer">
<div class="thingContainer">

<div class="thingSpacer thingSpacer0 iB"></div>
<div class="thing thing1 iB"></div>
<div class="thingSpacer thingSpacer1 iB"></div>
<div class="thing thing2 iB"></div>
<div class="thingSpacer thingSpacer2 iB"></div>
<div class="thing thing3 iB"></div>
<div class="thingSpacer thingSpacer3 iB"></div>
<div class="thing thing4 iB"></div>
<div class="thingSpacer thingSpacer4 iB"></div>
<div class="thing thing5 iB"></div>
<div class="thingSpacer thingSpacer5 iB"></div>
<div class="thing thing6 iB"></div>
<div class="thingSpacer thingSpacer6 iB"></div>
<div class="thing thing7 iB"></div>
<div class="thingSpacer thingSpacer7 iB"></div>
<div class="thing thing8 iB"></div>
<div class="thingSpacer thingSpacer8 iB"></div>
</div></div>

CSS

.thingOuterContainer {
  width: 100%;
  height: 100px;
  background: pink;
  padding: 0 25px;
}
.thingOuterContainer {
  margin-left: calc(50% - 356px);
  width: 750px;
}
.iB {
  display: inline-block;
}
.thingSpacer {
  height: 100px;
  width: 1px;
  background: darkblue;
}
.thing {
  width: 80px
}
.thing1 {
  width: 100px;
}