JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Compare photos">
    <title>Compare photos</title>
    <g>
        <rect x="2.5" y="2.5" width="16" height="16" fill="none" class="svg-stroke-action" />
        <rect x="2.5" y="2.5" width="8" height="16" class="svg-fill-action" />
    </g>
</svg>

<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Compare photos">
    <title>Compare photos</title>
    <g>
        <rect x="2.5" y="2.5" width="16" height="16" fill="none" class="svg-stroke-action" />
        <rect x="2.5" y="2.5" width="8" height="16" class="svg-fill-action" />
        <circle r="5.5" cx="10.5" cy="10.5" fill="#EEE" stroke="#EEE"/>
        <circle r="4.5" cx="10.5" cy="10.5" class="svg-fill-action"/>
        <line x1="8.5" y1="9" x2="12.5" y2="9" stroke="#EEE" fill="none" stroke-width="1.5"/>
        <line x1="8.5" y1="12" x2="12.5" y2="12" stroke="#EEE" fill="none" stroke-width="1.5"/>
    </g>
</svg>

<svg width="21" height="21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="Compare photos">
    <title>Compare photos</title>
    <g>
        <rect x="2.5" y="2.5" width="16" height="16" fill="none" class="svg-stroke-action" />
        <rect x="2.5" y="2.5" width="8" height="16" class="svg-fill-action" />
        <line x1="6.5" y1="8.5" x2="10.5" y2="8.5" stroke="#EEE" fill="none" stroke-width="2"/>
        <line x1="6.5" y1="12.5" x2="10.5" y2="12.5" stroke="#EEE" fill="none" stroke-width="2"/>
        <line x1="10.5" y1="8.5" x2="14.5" y2="8.5" class="svg-stroke-action" fill="none" stroke-width="2"/>
        <line x1="10.5" y1="12.5" x2="14.5" y2="12.5" class="svg-stroke-action" fill="none" stroke-width="2"/>
    </g>
</svg>

CSS

.svg-fill-action {
    fill: #A00893;
}

.svg-stroke-action {
    stroke: #A00893;
}

svg {
  /*border: 1px solid #AAA;*/
  display: block;
  margin: 5px;
  zoom: 1;
}