JSFiddle - React, Tailwind, and code Playground

by acjackson911

HTML

<!-- TEMPLATE -->


<svg width="0px" height="0px" viewBox="0 0 100 33" class="hardcore-hide">

                <defs>
        <pattern id="diagonalHatch" width="4" 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>
                    
        <pattern id="diagonalHatchAlt" width="4" 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>            
        
   
    
    
    
    <g id="template">

        
        <rect id='userdata-used-hatch' x="0" y="0" width="20%" height="100%" />
        <rect id="userdata-used" x="0" y="0" width="20%" height="100%" fill="url(#diagonalHatch)" />
        
        <rect id="userdata-free" x="20" y="0" width="70%" height="100%" />
        

        <rect id="snapshot-unused" x="90" y="0" width="4%" height="100%"  />
        
        <rect id='snapshot-used-hatch' x="94" y="0" width="6%" height="100%"  />
        <rect id="snapshot-used" x="94" y="0" width="6%" height="100%" fill="url(#diagonalHatchAlt)" />
        
    </g>
                     </defs>

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

CSS

.hardcore-hide {
    #display: none;
}

.rect {
    #margin-top: 10px;
   # margin-left: 15px;
    
    height: 99px;
    width: 300px;
}

#.rect:hover{
#  transform:scale(1.1);
#}

#userdata-free {
    fill: yellow;
    stroke: black;
}


#userdata-used-hatch {
    fill: yellow;
    stroke: black;
}

#userdata-used-free {
    fill:'yellow';
}



#snapshot-unused {
    fill: lightblue;
    stroke: black;
}

#snapshot-used {
    stroke: black;
}

#snapshot-used-hatch {
    fill: lightblue;
    stroke: black;
}