JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="circle-row">
<div class="circle">
  <div class="text">
    <span>
  13<br>
  Affiliation</span>
  </div>
</div>

<div class="circle">
 <div class="text">
  <span>
  12700<br>
  courses</span>
</div>
</div>

<div class="circle">
 <div class="text">
<span>
512<br>
Instruction</span>
</div>
</div>

<div class="circle">
 <div class="text">
<span>
12500<br>
Learner</span>
</div>
</div>
</div>

CSS

.circle-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.circle{
  display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    color: white;
    text-align: center;
}

.text {
  position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    display: flex;
    align-items: center;
}

.circle:after{
content: '';
padding-bottom:100%
display:block;

}
span{
font-size: 2opx;
width:100%;
}