JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.32 30.59"><path d="M16.57,4.8h2.78a1.39,1.39,0,0,1,1.39,1.39h0V29.83a1.39,1.39,0,0,1-1.39,1.39H.82a1.4,1.4,0,0,1-1.4-1.38h0V6.19A1.39,1.39,0,0,1,.81,4.8H3.6V3.87A1.38,1.38,0,0,1,5,2.48H7.43a3.66,3.66,0,0,1,.43-.74,2.77,2.77,0,0,1,3.89-.55,2.65,2.65,0,0,1,.56.55,3.62,3.62,0,0,1,.42.74h2.45a1.39,1.39,0,0,1,1.39,1.39h0Zm-12-.93V6.66A.47.47,0,0,0,5,7.12h10.2a.47.47,0,0,0,.47-.46V3.87a.47.47,0,0,0-.46-.46H12.4A.47.47,0,0,1,12,3.06a2.09,2.09,0,0,0-.08-.23,2.5,2.5,0,0,0-.3-.53,1.86,1.86,0,0,0-3,0,2.13,2.13,0,0,0-.3.53,1,1,0,0,0-.08.23.48.48,0,0,1-.45.35H5a.47.47,0,0,0-.46.46ZM3.59,5.73H.82a.46.46,0,0,0-.47.46h0V29.83a.47.47,0,0,0,.46.47H19.35a.47.47,0,0,0,.47-.47h0V6.19a.47.47,0,0,0-.46-.46H16.57v.93a1.39,1.39,0,0,1-1.39,1.39H5A1.39,1.39,0,0,1,3.6,6.66ZM16.11,23.8a.47.47,0,0,1,0,.93h-6a.47.47,0,1,1,0-.93Zm0-11.12a.47.47,0,0,1,0,.93h-6a.47.47,0,0,1,0-.93Zm0,5.56a.47.47,0,0,1,.44.49.46.46,0,0,1-.44.44h-6a.47.47,0,0,1,0-.93ZM4.39,12.82l.6.6,1.52-1.53a.47.47,0,0,1,.66,0,.46.46,0,0,1,0,.65h0L5.31,14.4a.46.46,0,0,1-.65,0h0l-.93-.93a.46.46,0,0,1,0-.65.47.47,0,0,1,.66,0Zm0,5.56L5,19l1.52-1.53a.47.47,0,0,1,.66.66L5.31,20a.46.46,0,0,1-.65,0h0L3.73,19a.46.46,0,0,1,0-.65.47.47,0,0,1,.66,0Zm0,5.56.6.6L6.51,23a.47.47,0,0,1,.66.66L5.31,25.52a.46.46,0,0,1-.65,0h0l-.93-.92a.47.47,0,0,1,.66-.66Z" transform="translate(0.58 -0.63)" fill="purple" fill-rule="evenodd"/></svg>

CSS

body {
  background-color: gold;
}