JSFiddle - React, Tailwind, and code Playground

by jaydeedub

HTML

<svg width="305" height="80">
<!-- Y -->
<circle class="yappee-circle" r="7" cx="9" cy="9" style="fill: red"/>    <circle class="yappee-circle" r="7" cx="22" cy="40" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="14" cy="71" style="fill: red"/>            <circle class="yappee-circle" r="7" cx="50" cy="9" style="fill: red"/>
<!-- A -->
<circle class="yappee-circle" r="7" cx="75" cy="9" style="fill: red"/><circle class="yappee-circle" r="7" cx="57" cy="40" style="fill: red"/>    <circle class="yappee-circle" r="7" cx="39" cy="71" style="fill: red"/><circle class="yappee-circle" r="7" cx="80" cy="40" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="85" cy="71" style="fill: red"/>
<!-- P -->
<circle class="yappee-circle" r="7" cx="115" cy="9" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="110" cy="40" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="105" cy="71" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="141" cy="19" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="137" cy="40" style="fill: red"/>
<!-- P -->
<circle class="yappee-circle" r="7" cx="166" cy="9" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="161" cy="40" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="156" cy="71" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="192" cy="19" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="188" cy="40" style="fill: red"/>
<!-- E -->
<circle class="yappee-circle" r="7" cx="217" cy="9" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="212" cy="40" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="207" cy="71" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="245" cy="9" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="236" cy="40" style="fill: red"/>
<circle class="yappee-circle" r="7" cx="235" cy="71" style="fill: red"/>
<!-- E -->
<circle class="yappee-circle" r="7" cx="268" cy="9" style="fill:...

CSS

circle.yappee-circle {
    stroke: gray;
    stroke-width: 2px;
}