JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<span class="number">1</span>
<span class="number">2</span>

<div class="card">
    <span>This number is broken</span>
    <span class="number">3</span>
</div>
</div>

CSS

#container .number
{
    border-radius: 50%;
    width: 32px;
    height: 24px;
    text-align: center;
    padding-top:8px;
    font-size: 14px;
    display:inline-block;
    line-height: 16px;
    margin-left:8px;
    color:white;
    background-color:black;
    border-color:white;
}

.card span
{
    color:blue;
    background-color:gray;
}