JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="batata">
  <div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div><div class="cell">
  <div class="shape"></div>
</div>
  
</div>

CSS

* {
  box-sizing: border-box;
}

#batata {
  position: relative;
  
  width: 100px;
  height: 100px;  
  
  background-position: 0px 0px;
  background-image: 
    repeating-linear-gradient(
      90deg,
      yellow 4px,
      yellow 6px,
      red 6px,
      red 14px /* determines size */
    );  
}

.cell {
  position: absolute;
  display: inline-block;
  padding: 7px 0 0 1px;
  width: 10px;
  height: 23px;  

}

.cell .shape {
  width: 7px;
  height: 7px;
  background: white;
  border-radius: 100%;
}