JSFiddle - React, Tailwind, and code Playground

HTML

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

CSS

.numberCircle {
    display:inline-block;
    line-height:0px;
    
    border-radius:50%;
    border:2px solid;
    
    font-size:32px;
}

.numberCircle span {
    display:inline-block;
    
    padding-top:50%;
    padding-bottom:50%;
    
    margin-left:8px;
    margin-right:8px;
}