JSFiddle - React, Tailwind, and code Playground

by dorathoto

HTML

<div class="bolaCinza"> </div>
<hr>
  <div class="bolaCinza"> </div>
  <div class="bolaAzul"> </div>
  <hr>
<div >
  <div class="bolaCinza"> </div>
  <div class="bolaAzul"> </div>
  <div class="bolaRed"> </div>
</div>

<h1>
Com Quadrado
</h1>

<div class="quadrado">
<div class="bolaCinza"> </div>
</div>
<hr>
<div class="quadrado">
  <div class="bolaCinza"> </div>
  <div class="bolaAzul"> </div>
  </div>
  <hr>
<div class="quadrado">
  <div class="bolaCinza"> </div>
  <div class="bolaAzul"> </div>
  <div class="bolaRed"> </div>
</div>
<h1>Final</h1>
<div class="q1"></div>
<div class="q2"></div>
<div class="q3"></div>


</div>

CSS

body{
  background-Color: black;
  color: white
}

.bolaCinza {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: #b6b6b6;
    position: relative;
    left: 5px
}
.bolaAzul{
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: #2c2cff;
}
.bolaRed{
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: red;
    position: relative;
    left: -4px;
}
.quadrado{
    border: 1px solid #ffffff63;
    width: 38px;
    border-radius: 4px;
}
.q1{
  
}