JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg" >
  <ellipse id="myCircle" style="stroke: rgb(0, 0, 0); " cx="30" cy="30" rx="25" ry="25"/>
  
  <text id="myE" x="60" y="70">E</text>
</svg>

<br>
Pick color of "E"
<input id="colorE" type="color" value="#ff0000" oninput="myE.style.fill = this.value" />

CSS

svg {
  width: 200px;
}

#myCircle {
  fill: rgb(24, 79, 220);
}

#myCircle:hover {
  fill: red;
}

#myE {
  font-family: Arial, sans-serif;
  font-size: 90px;
  fill: #f00;
}