JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="circles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 105.5 105.5" enable-background="new 0 0 105.5 105.5" xml:space="preserve">
    <circle fill="#407596" stroke="#FFFFFF" stroke-miterlimit="10" cx="52.7" cy="52.7" r="52.2"/>
    <circle fill="#5554A4" stroke="#FFFFFF" stroke-miterlimit="10" cx="52.7" cy="52.7" r="28.2"/>
</svg>

CSS

#circles circle:first-child {
    fill: red;
}

#circles circle:last-child {
    fill: blue;
    strple: #fff;
    stroke-width: 3px;
}