JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<svg class="char char_0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.58 314.65"><g><polygon class="char-jig" points="178.58 314.65 178.58 157.18 172.91 157.18 172.91 0 5.67 0 0 0 0 157.03 5.67 157.03 5.67 314.65 178.58 314.65"/><path class="char-letter" d="M160.16,218.27a50.82,50.82,0,0,1-51,51H69.45a50.63,50.63,0,0,1-51-51V96.38a50.81,50.81,0,0,1,51-51h39.68a50.82,50.82,0,0,1,51,51ZM120.47,103.75c0-12.76-7.08-19.84-19.84-19.84H78c-12.75,0-19.84,7.08-19.84,19.84V210.9c0,12.75,7.09,19.84,19.84,19.84h22.68c12.76,0,19.84-7.37,19.84-19.84Z"/></g></svg>

<svg class="char char_" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68.08 314.73"><g><polygon class="char-jig" points="68.08 314.73 68.08 157.41 62.41 157.41 62.41 0.08 0 0 0 157.32 5.67 157.32 5.67 314.65 68.08 314.73"/></g></svg>

<svg class="char char_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.54 314.65"><g><polygon class="char-jig" points="76.53 314.65 76.53 157.32 70.87 157.32 70.87 0 0 0 0 157.32 5.67 157.32 5.67 314.65 76.53 314.65"/><rect class="char-letter" x="18.43" y="45.36" width="39.68" height="223.93" rx="5.67" /></g></svg>

SCSS

.char {
  display: inline-block;
  height: 200px;
  
  .char-jig {
    fill: none;
  }
  
  .char-letter {
    fill: #000;
  }
}