JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h1>

<h2>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h2>

<h3>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h3>

<h6>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h6>

CSS

.circle {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height:1.8em;
    border: 1px solid black;
    border-radius: 50%;
    background-color: lightblue;
    text-align: center;
}