JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="40">
    <circle r="20" transform="translate(20 20)" class="test"/>
    <circle r="20" transform="translate(60 20)" class="   test"/>
    <circle r="20" transform="translate(100 20)" class="test   "/>
    <circle r="20" transform="translate(140 20)" class="   test   "/>
</svg>
<div class="test"></div>
<div class="   test"></div>
<div class="test   "></div>
<div class="   test   "></div>

CSS

.test {
    fill: green;
    background: green;
}

div { width: 20px; height: 20px; display: inline-block; }