JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">
  <div class="row">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
  </div>
  <div class="row">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
  </div>
  <div class="row">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
  </div>
</div>

CSS

.circle{border:1px solid black;border-radius:50%;width:33%;float:left;margin:0;padding:0;padding-top:33%}
.row{clear:left;}