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>

<svg class="opCle" height="20" width="20" viewBox="0 0 16 16"
  onclick="this.classList.toggle('open')" >
  <rect x="2" y="2" width="12" height="12"/>
  <rect x="5" y="5" width="6" height="6"/>
</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;
}

/*circle*/

.opCle rect{
  fill: white;
  stroke: #444;
  stroke-width: 2;
}

.opCle rect:last-child{
  fill: #444;
  stroke-width: 0;
}

.opCle:hover rect{
  stroke: DodgerBlue;
}

.opCle:hover rect:last-child{
  fill: DodgerBlue;
}

/*Active*/

.opCle:active rect:last-child{
  fill: white;
}

/*open*/

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

.opCle:active rect{
  fill: #444;
  stroke: #444;
}