JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="foo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path fill="#8E00BD" d="M23.485 19.876l.068.014c.133.043.224.167.225.307v5.85c0 1.252 1.015 2.268 2.268 2.268s2.269-1.016 2.269-2.269v-2.592c0-.895.725-1.62 1.62-1.62.893 0 1.618.722 1.62 1.615v2.592c0 3.043-2.466 5.51-5.509 5.51-3.042 0-5.509-2.467-5.509-5.51V22.93c0-.086.04-.168.106-.222.968-.78 1.824-1.688 2.548-2.699.082-.114.228-.162.362-.12zM12.11.444c6.443 0 11.667 5.224 11.667 11.667 0 3.094-1.23 6.062-3.417 8.25-2.188 2.188-5.156 3.417-8.25 3.417C5.668 23.778.444 18.554.444 12.11S5.668.444 12.111.444zm0 16.852c-1.074 0-1.944.87-1.944 1.945 0 1.074.87 1.944 1.944 1.944 1.074 0 1.945-.87 1.945-1.944 0-1.074-.871-1.945-1.945-1.945zm-4.49-2.592c-.393-.681-1.158-1.059-1.938-.956-.78.103-1.42.665-1.624 1.425-.204.76.07 1.567.694 2.046.624.478 1.475.534 2.156.14.93-.536 1.249-1.725.712-2.655zm11.637-.712c-.681-.393-1.532-.337-2.156.141-.624.479-.898 1.287-.695 2.046.204.76.845 1.322 1.625 1.425.78.102 1.544-.275 1.937-.956.537-.93.219-2.119-.711-2.656zM6.909 6.862c-.681-.393-1.532-.337-2.156.142-.624.478-.898 1.286-.694 2.046.203.76.844 1.321 1.624 1.424.78.103 1.545-.274 1.938-.955.537-.93.218-2.12-.712-2.657zm13.06.712c-.393-.681-1.158-1.058-1.937-.956-.78.103-1.421.665-1.625 1.425-.203.76.07 1.567.695 2.046.624.479 1.475.534 2.156.141.93-.537 1.248-1.726.711-2.656zm-7.858-4.537c-1.074 0-1.944.87-1.944 1.944 0 1.074.87 1.945 1.944 1.945.516 0 1.01-.205 1.375-.57.365-.364.57-.859.57-1.375 0-1.073-.871-1.944-1.945-1.944z"/>
</svg>
</div>

SCSS

.foo {
  width: 100px;
  height: 100px;
  background: pink;
}