JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<svg class="opBox" height="16" width="16" viewBox="0 0 16 16">
  <polyline points="1,1 1,15 15,15 15,1 1,1" class="cuadro" />
  <path d="M7 3 L9 3 L9 7 L13 7 L13 9 L9 9 L9 13 L7 13 L7 9 L3 9 L3 7 L7 7 Z" />
  <path class="m" d="M3 7 L13 7 L13 9 L3 9 Z" />
</svg>

CSS

.opBox polyline{
  fill:none;
  stroke:black;
  stroke-width:2;
}

.opBox path{
  fill:none;
}

.opBox path.m{
  fill:black;
}

.opBox:hover path.m{
  fill:DodgerBlue;
}

.opBox.active:hover path{
  fill:DodgerBlue;
}

.opBox.active:hover polyline, .opBox:hover polyline{
  stroke:DodgerBlue;
}


.opBox.active path{
  fill:black;
}

.opBox:active polyline{
  fill:black;
  stroke:black !important;
}

.opBox:active path.m{
  fill:white;
}

.opBox.active:active path{
  fill:white;
}

JavaScript

document.querySelectorAll(".opBox").forEach( (e) => {e.onclick = () => { e.classList.toggle("active") }} )