JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle yellow">
  <span class="number">10</span>
  <span class="none" style="display:none;">Connectés</span>
</div>
<div class="circle red">
  <span class="number">100</span>
  <span class="none" style="display:none;">Connectés</span>
</div>
<div class="circle green">
  <span class="number">200</span>
  <span class="none" style="display:none;">Connectés</span>
</div>
<div class="circle blue">
  <span class="number">300</span>
  <span class="none" style="display:none;">Connectés</span>
</div>

CSS

.circle {
  background-color: white;
  border: 1px dashed;
  color: white;
  font-size: 24px;
  height: 120px;
  width: 120px;
  border-radius: 60px;
  line-height: 120px;
  float: left;
  margin: 10px;
  text-align: center;
}
.yellow {
  background-color: #F1C71B;
}
.red {
  background-color: #DF5900;
}
.blue {
  background-color: #3498DB;
}
.green {
  background-color: #39D27A;
}

JavaScript

$(document).ready(function()
{
    $('.circle').bind('mouseenter mouseleave', function(){
        $(this).find('span').toggle();
    });
});