JSFiddle - React, Tailwind, and code Playground

by STHayden

HTML

<div style="padding:20px; background:#7F8590">

<svg xmlns="http://www.w3.org/2000/svg" width="35" height="22" viewBox="0 0 35 22" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <rect id="a" width="28" height="22"/>
    <mask id="b" width="28" height="22" x="0" y="0" fill="white">
      <use xlink:href="#a"/>
    </mask>
    <polygon id="c" points="2.002 0 0 0 0 16 2.002 16 4.004 16 4.004 0"/>
  </defs>
  <path class="mainColor" d="M13.240331,3 L8,19.1273812 L9.21339234,19.1273812 L10.8989802,13.9390033 L17.0998653,13.9390033 L18.7842986,19.1273812 L20,19.1273812 L14.759669,3 L13.240331,3 Z M14,4.3981143 L16.7246488,12.7844911 L11.2741967,12.7844911 L14,4.3981143 Z"/>
  <g fill="none" fill-rule="evenodd">
    <use stroke="#FFFFFF" stroke-width="2" mask="url(#b)" stroke-linecap="square" stroke-dasharray="1 1" xlink:href="#a"/>
    <g transform="translate(31 3)">
      <mask id="d" fill="white">
        <use xlink:href="#c"/>
      </mask>
      <path fill="#3E454F" d="M4.0039,1 L4.0039,0 C3.1819,0 2.4579,0.403 2.0019,1.017 C1.5459,0.403 0.8219,0 -0.0001,0 L-0.0001,1 C0.8279,1 1.5019,1.674 1.5019,2.502 L1.5019,11 L0.5009,11 L0.5009,12 L1.5019,12 L1.5019,13.498 C1.5019,14.326 0.8279,15 -0.0001,15 L-0.0001,16 C0.8219,16 1.5459,15.597 2.0019,14.983 C2.4579,15.597 3.1819,16 4.0039,16 L4.0039,15 C3.1759,15 2.5019,14.326 2.5019,13.498 L2.5019,12 L3.5009,12 L3.5009,11 L2.5019,11 L2.5019,2.502 C2.5019,1.674 3.1759,1 4.0039,1" mask="url(#d)"/>
    </g>
  </g>
</svg>

</div>

CSS

.mainColor {
  fill: "red"
}