JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="rev_btn" src="" title="Шаг назад" onClick='rev()'/>
<input type="button" id="check_btn" src="" title="Проверить!" onClick='check()'/>
<div class="coloring">
  <div class="coloring-toolbox">
    <div class="palette">
      
    </div>
  </div>

  <div class="coloring-image">

  <svg id="a780dc9c-2107-4fd6-8fec-765248a5097a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="887.77227" viewBox="0 0 887.77227 772.83071"><title>happy_music</title><polygon points="887.772 763.25 252.263 772.831 0 728.121 393.817 728.121 887.772 763.25" fill="#ffffff"/><circle cx="731.82227" cy="101.66024" r="101.66024" fill="#ffffff"/><path d="M335.9542,797.01953s1.487-31.15875,31.97119-27.537" transform="translate(-156.11386 -63.58465)" fill="#ffffff"/><circle cx="171.2269" cy="688.52637" r="15.25711" fill="#ffffff"/><rect x="168.74434" y="714.21843" width="4.30672" height="30.14703" fill="#ffffff"/><path d="M838.40061,802.34205s1.487-31.15874,31.97119-27.537" transform="translate(-156.11386 -63.58465)" fill="#ffffff"/><circle cx="673.67331" cy="693.8489" r="15.25711" fill="#ffffff"/><rect x="671.19075" y="719.54095" width="4.30672" height="30.14703" fill="#ffffff"/><path d="M911.85146,807.66458s1.487-31.15874,31.9712-27.537" transform="translate(-156.11386 -63.58465)" fill="#ffffff"/><circle cx="747.12416" cy="699.17142" r="15.25711" fill="#ffffff"/><rect x="744.64161" y="724.86348" width="4.30672" height="30.14703" fill="#ffffff"/><path d="M456.24328,782.11645s1.487-31.15874,31.97119-27.53695" transform="translate(-156.11386 -63.58465)" fill="#ffffff"/><circle cx="291.51598" cy="673.6233" r="15.25711" fill="#ffffff"/><rect x="289.03342" y="699.31536" width="4.30672" height="30.14703" fill="#ffffff"/><path d="M229.50369,787.439s1.487-31.15874,31.97119-27.537" transform="translate(-156.11386 -63.58465)" fill="#ffffff"/><circle cx="64.77639" cy="678.94583" r="15.25711" fill="#ffffff"/><rect x="62.29383" y="704.63788" width="4.30672"...

CSS

.coloring {
  display: flex;
  flex-wrap: wrap;
}

.coloring-toolbox {
  flex: 1 1 0;
}

.palette {
  display: flex;
  flex-wrap: wrap;
}

.palette-button {
  width: 16px;
  height: 16px;
  margin: 5px;
  border: 2px solid transparent;
  cursor: pointer;
}

.palette-button-active {
  border-color: #000;
}

.coloring-image {
  flex: 3 1 0;
  width: 500px;
  height: auto;
  border: 5px dashed #ddd;
}

.coloring-image > svg {
  max-width: 100%;
}

.selected {
  opacity: 0.8;
  cursor: pointer;
}

path {
  stroke: black;
  stroke-width: 1;
  stroke-linejoin: round;
}

JavaScript

const colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
                '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
                '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
                '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
                '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
                '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
                '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
                '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
                '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
                '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

function renderColorPalette () {
  const paletteContainer = document.querySelector(".palette");
  
  const colorsItems = colors
  .map(color => {
    return `<button
              style="background-color: ${color}"
              class="palette-button"
              data-color="${color}"></button>`;
  })
  .join("");
  
  paletteContainer.innerHTML = colorsItems;
}

function handleClickOnColor (event) {
  const button = event.target.closest(".palette-button");
  if (!button) return;
  
  const oldActiveButton = document.querySelector(".palette-button-active");
  if (oldActiveButton) {
    oldActiveButton.classList.remove("palette-button-active");
  }
  
  button.classList.add("palette-button-active");
}

function setEventsOnFilledElements () {
  function handleMouseEnter () {
    this.classList.add("selected");
  }
  
  function handleMouseLeave () {
    this.classList.remove("selected");
  }
  
  function handleClick () {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    
    this.style.fill = currentColor.dataset.color;
  }
  
  const elements = document.querySelectorAll("*[fill]");
  elements.forEach(element => {
    element.addEventListener("mouseenter",...