JSFiddle - React, Tailwind, and code Playground

JavaScript

/**
 * ******************************************************************************************
 * Choose the 3 colors
 * ******************************************************************************************
 */

// Array to store the selected colors
const selectedColors = [];

// Function to handle color block click
function handleColorBlockClick(event) {
  const selectedColorBlock = event.target;

  // Check if the clicked color block is in the input colors
  if (inputColorBlocks.includes(selectedColorBlock)) {
    // Find the clicked color block in the selected colors
    const index = selectedColors.indexOf(
      selectedColorBlock.style.backgroundColor
    );

    // Move the clicked color block back to the generated colors and remove the color from the array
    if (index !== -1) {
      const emptyGeneratedBlock = generatedColorBlocks.find(
        (block) => !block.style.backgroundColor
      );
      if (emptyGeneratedBlock) {
        emptyGeneratedBlock.style.backgroundColor = selectedColors[index];
        selectedColorBlock.style.backgroundColor = "";
        selectedColors.splice(index, 1);
      }
    }
  } else if (selectedColors.length <= 3) {
    // Find the clicked color block in the generated colors
    const index = generatedColorBlocks.indexOf(selectedColorBlock);

    // Move the clicked color block to the input colors and add the color to the array
    if (index !== -1) {
      const color = generatedColorBlocks[index].style.backgroundColor;
      const emptyInputBlock = inputColorBlocks.find(
        (block) => !block.style.backgroundColor
      );
      if (emptyInputBlock) {
        emptyInputBlock.style.backgroundColor = color;
        generatedColorBlocks[index].style.backgroundColor = "";
        selectedColors.push(color);
      }
    }
  }
}

// Attach the click event listener to each color block in the generated colors and input colors
generatedColorBlocks.forEach((block) =>
  block.addEventListener("click",...