JSFiddle - React, Tailwind, and code Playground

by Clemens Himmer

HTML

<div class="wrapper">
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
           ง⚆ᴥ⚆ง
      </div>
  </div>
  <div class="container">
      <div class="dummy"></div>
      <div class="element">
          ...

CSS

.wrapper {
  width: 100%;
}
.container {
    display: inline-block;
    position: relative;
    width: 7.5%;    
    margin-right: 2.5%;
}
.wrapper .container:nth-child(18n+10) {  
    margin-left: 5%;
}
.dummy {
    margin-top: 100%;
}
.element {
    /* Ignore that, now the dots just look like giant bears ready to fight */  
    text-align: center;
    background-color: #b85b19;
    color: #3f1f09;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    display: inline-block;
}