JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="baz one">
  <svg xmlns="http://www.w3.org/2000/svg" class="shape" width="16" height="16" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="9" />
  </svg>
</div>

<hr>

<div class="baz two">
  <svg xmlns="http://www.w3.org/2000/svg" class="shape" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="9" />
  </svg>
</div>

CSS

.baz {
  background-color: tan;
  display: inline-block;
  height: 30vw;
  width: 30vw;
}

.shape {
  fill: green;
}