JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="app">
  <MyComponent></MyComponent>
</div>

<script type="text/babel">
  const domElement = document.querySelector("#app");
  
  function MyComponent() {
    const myProp = {
      cx: '50%',
      cy: '50%',
      r: '45%',
      'stroke-width': '10%'
    }
    return ( 
      <svg>
        <circle {...myProp}> </circle>
      </svg>
    )
  }

  ReactDOM.render(<MyComponent />, domElement)
</script>

CSS

div {
  width: 150px;
  height: 150px;
  background-color: red;
}

svg {
  width: 100%;
  height: 100%;
}

svg circle {
  fill: none;
  stroke: #000;
}