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="4.5" cx="10.5" cy="10.5" class="svg-fill-action"/>
        <circle r="5" cx="10.5" cy="10.5" fill="none" stroke="#EEE"/>
        <line x1="9" y1="9" x2="12" y2="9" stroke="#EEE" fill="none"/>
        <line x1="9" y1="12" x2="12" y2="12" stroke="#EEE" fill="none"/>
    </g>
</svg>

CSS

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

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

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