JSFiddle - React, Tailwind, and code Playground

by christopheviau

HTML

<svg width="600" height="600">

  <g class="top-left" transform="translate(0, 0)">
    <rect width="200" height="200"></rect>
    <text class="icon-x hide" y="100" x="100">X</text>
    <text class="icon-o hide" y="100" x="100">O</text>
  </g>
  
  <g transform="translate(200, 0)">
    <rect width="200" height="200"></rect>
    <text y="100" x="100">X</text>
    <text y="100" x="100">O</text>
  </g>
  
  <g transform="translate(400, 0)">
    <rect width="200" height="200"></rect>
    <text y="100" x="100">X</text>
    <text y="100" x="100">O</text>
  </g>
  
</svg>

CSS

rect {
  stroke: red;
  fill: white;
}

text {
  font-size: 48px;
  text-anchor: middle;
}

.hide {
  display: none;
}

JavaScript

const group1 = document.querySelector("svg .top-left")
const text1X = group1.querySelector("text.icon-x")
const text1O = group1.querySelector("text.icon-o")
const rect1 = group1.querySelector("rect")

let count = 0
rect1.onclick = function (){
	if (count === 0) {
  	text1X.classList.remove("hide")
  } else if (count === 1) {
  	text1O.classList.remove("hide")
    text1X.classList.add("hide")
  }
  count++
}