JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div 
        id="element"
        style="
            display: block; 
            position: absolute; 
            left: 0px; 
            background-color: transparent; 
            top: 0; 
            width: 140px; 
            height: 140px; 
            text-align: center; 
        "  
    >
        <svg 
            style="
                overflow: hidden; 
                position: relative; 
            " 
            height="140" 
            version="1.1" 
            width="140" 
                xmlns="http://www.w3.org/2000/svg"        
        >
            <circle
                cx="70" 
                cy="70" 
                r="70" 
                fill="red" 
                stroke="none"           
            >
            </circle>
       </svg>
    </div>
</div>

CSS

#header svg circle {
    /* 
        Note how the fill colour is not the same as the 
        as that found inline, in the body of the markup.                
    */                
    fill: lightblue;
}