JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="vertical-align:middle;" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve" class="step-number">
	<g>
        <circle class="num-circle" cx="16" cy="16" r="14"></circle>
        <text class="num-text" x="16" y="16" dy="6">1</text>
    </g>
</svg>

CSS

circle.num-circle{
    fill:#FFFFFF; 
    stroke:#90B9E2; 
    stroke-width: 4px;
}

text.num-text{
    fill:#90B9E2;
    font-family:AdobeClean;
    font-weight:bold;
    text-anchor:middle;
    font-size:19;
}