JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">  
    <svg width="100%" height="100%" viewBox="0 -100 100 100">
      <text font-size="138" fill="currentColor" x="50" text-anchor="middle">☯</text>
    </svg>
</div>
<div class="b">  
    <svg width="100%" height="100%" viewBox="0 -100 100 100">
      <text font-size="138" fill="currentColor" x="50" text-anchor="middle">☯</text>
    </svg>
</div>
<div class="c">  
    <svg width="100%" height="100%" viewBox="0 -100 100 100">
      <text font-size="138" fill="currentColor" x="50" text-anchor="middle">☯</text>
    </svg>
</div>

CSS

.a {
    width: 25px;
    height: 25px;
    border: 1px dotted;
}

.b {
    width: 200px;
    height: 100px;
    border: 1px dotted;
    color: red;
}

.c {
    width: 800px;
    height: 800px;
    border: 1px dotted;
    color: blue;
}