JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<svg class="opBox" height="20" width="20" viewBox="0 0 16 16"
  onclick="this.classList.toggle('open')" >
  <circle cx="8" cy="8" r="7"/>
  <rect x="4" y ="7" width="8" height="2" />
  <rect x="7" y ="4" width="2" height="8" />
</svg>

CSS

.opBox circle{
  fill: white;
  stroke: #444;
  stroke-width: 2;
}

.opBox rect{
  fill: #444;
}

.opBox:hover circle{
  stroke: DodgerBlue;
}

.opBox:hover rect{
  fill: DodgerBlue;
}

/*open*/

.opBox.open rect:last-child{
  fill: none;
}

.opBox:active circle{
  fill: #444;
  stroke: #444;
}

.opBox:active rect{
  fill: white;
}