JSFiddle - React, Tailwind, and code Playground

by acjackson911

HTML

<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hardcore-hide">
    
    <defs>
    <pattern id="diagonalHatch" width="5" height="5" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
</pattern>
    </defs>
    
   <g id="template">
    
    <rect id="left" x="0" y="0" width="50" height="100" fill="url(#diagonalHatch)"/>
    <rect id="right" x="50" y="0" width="50" height="100" />
   </g>
</svg

      
<!-- USE TEMPLATE SEVERAL TIMES -->
<svg viewBox="0 0 100 100" class="rect rect-1" id='box1'>
  <use xlink:href="#template">
</svg>
    
<svg viewBox="0 0 100 100" class="rect rect-2" id='box2'>
  <use xlink:href="#template">
</svg>

CSS

.hardcore-hide {
  #display: none;
}

.rect {
  height: 100px;
  width: 100px;
}

.rect-1 .left {
    fill:red;
    color:yellow;
}

.right {
    fill: green;
    color:teal;
}