JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path class="path" d="M53.556 22.589a1 1 0 00-.094.03h-23.03c-2.212 0-4.032 1.82-4.032 4.032v48.406c0 2.212 1.82 4.031 4.031 4.031h2.031v.532c0 1.64 1.327 3 2.97 3H71.9c1.641 0 3-1.36 3-3V66.338c0-1.641-1.359-2.968-3-2.968h-2.625V37.682a1 1 0 000-.062 1 1 0 000-.031 1 1 0 00-.031-.187 1 1 0 000-.031 1 1 0 000-.063 1 1 0 00-.031-.031 1 1 0 000-.031 1 1 0 00-.031-.063 1 1 0 00-.031-.062 1 1 0 00-.031 0 1 1 0 00-.031-.063 1 1 0 00-.031-.031 1 1 0 00-.031-.062 1 1 0 00-.031-.031 1 1 0 00-.031-.031L54.37 22.87a1 1 0 00-.062-.063 1 1 0 00-.656-.218 1 1 0 00-.094 0zm-23.125 2.03h22.25v9.97c0 2.211 1.821 4.03 4.031 4.03h10.563v24.75H35.431a2.966 2.966 0 00-2.969 2.97v10.75h-2.03a2.02 2.02 0 01-2.032-2.032V26.651c0-1.129.902-2.031 2.031-2.031zm24.25 1.345L65.15 36.026l.625.594h-9.063a2.02 2.02 0 01-2.03-2.031v-8.625zM31.837 40.9a1.01 1.01 0 10.282 2H63.65a1 1 0 100-2H32.119a1 1 0 00-.188 0 1.004 1.004 0 00-.094 0zm0 5.906a1.01 1.01 0 10.282 2H63.65a1 1 0 100-2H32.119a1 1 0 00-.188 0 1.004 1.004 0 00-.094 0zm0 5.907a1.01 1.01 0 10.282 2H63.65a1 1 0 100-2H32.119a1 1 0 00-.188 0 1.004 1.004 0 00-.094 0zm.094 5.875a1.004 1.004 0 00.188 2h17a1 1 0 100-2h-17a1 1 0 00-.094 0 1.001 1.001 0 00-.094 0zm3.5 6.78h36.47c.567 0 1 .402 1 .97v13.28a.98.98 0 01-1 1H35.43c-.568 0-.968-.431-.968-1V66.34c0-.568.4-.97.968-.97zm6 3.813v1.313h2.282v6.375h1.562v-6.375h2.281v-1.313h-6.125zm6.594 0L50.4 72.87l-2.625 4h1.875l1.688-2.656 1.718 2.656h1.875l-2.625-3.938 2.375-3.75h-1.78l-1.532 2.47-1.531-2.47h-1.813zm7.156 0v1.313h2.282v6.375h1.562v-6.375h2.25v-1.313h-6.094zm-16.187 6.22v1.468h1.469V75.4h-1.47z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M55.934 18.345a1 1 0 00-.094.03H32.965c-2.201 0-4.032 1.788-4.032 4v48.439c0 2.214 1.832 4 4.032 4h2.781v.562c0 1.641 1.327 3 2.969 3h36.468c1.642 0 3-1.359 3-3V62.095c0-1.642-1.358-3-3-3h-3.406v-25.72a1 1 0 00-.312-.75l-14.594-14a1 1 0...

CSS

div {
  background-image: url('data:image/svg+xml;utf8,<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path class="path" fill="%23CCC" d="M53.556 22.589a1 1 0 00-.094.03h-23.03c-2.212 0-4.032 1.82-4.032 4.032v48.406c0 2.212 1.82 4.031 4.031 4.031h2.031v.532c0 1.64 1.327 3 2.97 3H71.9c1.641 0 3-1.36 3-3V66.338c0-1.641-1.359-2.968-3-2.968h-2.625V37.682a1 1 0 000-.062 1 1 0 000-.031 1 1 0 00-.031-.187 1 1 0 000-.031 1 1 0 000-.063 1 1 0 00-.031-.031 1 1 0 000-.031 1 1 0 00-.031-.063 1 1 0 00-.031-.062 1 1 0 00-.031 0 1 1 0 00-.031-.063 1 1 0 00-.031-.031 1 1 0 00-.031-.062 1 1 0 00-.031-.031 1 1 0 00-.031-.031L54.37 22.87a1 1 0 00-.062-.063 1 1 0 00-.656-.218 1 1 0 00-.094 0zm-23.125 2.03h22.25v9.97c0 2.211 1.821 4.03 4.031 4.03h10.563v24.75H35.431a2.966 2.966 0 00-2.969 2.97v10.75h-2.03a2.02 2.02 0 01-2.032-2.032V26.651c0-1.129.902-2.031 2.031-2.031zm24.25 1.345L65.15 36.026l.625.594h-9.063a2.02 2.02 0 01-2.03-2.031v-8.625zM31.837 40.9a1.01 1.01 0 10.282 2H63.65a1 1 0 100-2H32.119a1 1 0 00-.188 0 1.004 1.004 0 00-.094 0zm0 5.906a1.01 1.01 0 10.282 2H63.65a1 1 0 100-2H32.119a1 1 0 00-.188 0 1.004 1.004 0 00-.094 0zm0 5.907a1.01 1.01 0 10.282 2H63.65a1 1 0 100-2H32.119a1 1 0 00-.188 0 1.004 1.004 0 00-.094 0zm.094 5.875a1.004 1.004 0 00.188 2h17a1 1 0 100-2h-17a1 1 0 00-.094 0 1.001 1.001 0 00-.094 0zm3.5 6.78h36.47c.567 0 1 .402 1 .97v13.28a.98.98 0 01-1 1H35.43c-.568 0-.968-.431-.968-1V66.34c0-.568.4-.97.968-.97zm6 3.813v1.313h2.282v6.375h1.562v-6.375h2.281v-1.313h-6.125zm6.594 0L50.4 72.87l-2.625 4h1.875l1.688-2.656 1.718 2.656h1.875l-2.625-3.938 2.375-3.75h-1.78l-1.532 2.47-1.531-2.47h-1.813zm7.156 0v1.313h2.282v6.375h1.562v-6.375h2.25v-1.313h-6.094zm-16.187 6.22v1.468h1.469V75.4h-1.47z"/></svg>');
  background-repeat: no-repeat;
  

  width: 500px;
  height: 200px;
}

div .path {
  fill: red;
}