JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="div1">
  <div id="div2">Content2</div>
  <div id="div3">Content3</div>
  <div id="div4">Content4</div>
  <div id="div5">Content5</div>
  <div id="div6">Content6</div>
  <div id="div7">Content7</div>
  <div id="div8">Content8</div>
  <div id="div9">Content9</div>
  <div id="div10">Content10</div>
</div>

CSS

#div1 div {
  margin: 0% 0,5%;
  display: inline-block;
  color: white;
  border: 1px dotted yellow;
  align: center;
  vertical-align: middle;
}
#div1 {
  margin: 0px auto;
  width: 620px;
  height: 100px;
  background-color: black;
  overflow: hidden;
  text-align: center;
}

#div2, #div10 {
width: 21px;
height: 100px;
    
}

#div3, #div9 {
width: 60px;
height: 60px;
 
}

#div4, #div8 {
width: 70px;
height: 70px;
  
}

#div5, #div7 {
width: 77px;
height: 77px;
    
}

#div6 {
width: 85px;
height: 85px;

}