JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path id="option_a" d="M600.5,104.1c-276.1,0-500,223.9-500,500h100c0-220.9,179.1-400,400-400s400,179.1,400,400h100c0-276.1-223.9-500-500-500Z"/>
  <path id="option_b" d="M600.5,1004.1v100c276.1,0,500-223.9,500-500h-100c0,220.9-179.1,400-400,400Z"/>
  <path id="option_c" d="M200.5,604.1H100.5c0,276.1,223.9,500,500,500v-100c-220.9,0-400-179.1-400-400Z"/>
</svg>

CSS

PATH {
  fill: gray;
  stroke: #000;
  stroke-miterlimit: 10;
}

PATH:hover {
  cursor: pointer;
}

PATH#option_a:hover {
  fill: red !important;
}

PATH#option_b:hover {
  fill: green !important;
}

PATH#option_c:hover {
  fill: blue !important;
}