JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />

    <title>ColorQuest</title>
  </head>

  <body>
    <main>

      <p class="instructions">Get the correct potion color before you embark on your next adventure</p>

      <section class="top-section">
        <section class="top-section__left input-flasks" id="inputColors">
          <!-- 3 Colors input -->
          <div class="colors-block flask tooltip"><span class="tooltiptext">Reset color</span></div>
          <div class="colors-block flask tooltip"><span class="tooltiptext">Reset color</span></div>
          <div class="colors-block flask flask--equal tooltip"><span class="tooltiptext">Reset color</span></div>
        </section>

        <section class="top-section__right">
          <!-- Mixed input -->
          <div id="mixedColor">
            <div id="mixedColor" class="colors-block flask flask--bigger"></div>
          </div>
          <div class="line"></div>
          <!-- Generated mixed color, from the 3 last colors -->
          <div id="mixedCorrectColor" class="colors-block flask flask--bigger"></div>
        </section>
      </section>

      <section class="bottom-section">
        <section class="bottom-section__left">
          <p>Pick your mix (click on the flask to reset the color)</p>
          <!-- 5 random colors -->
          <div id="generatedColors" class="random-colors">
            <div class="colors-block"></div>
            <div class="colors-block"></div>
            <div class="colors-block"></div>
            <div class="colors-block"></div>
            <div class="colors-block"></div>
          </div>
        </section>

        <section class="bottom-section__right">
          <div class="actions">
            <!-- Mix colors button -->
            <button...

CSS

:root {
    --light: hsl(36, 14%, 93%);
    --dark: hsl(206, 19%, 22%);
    --gold: hsl(46, 86%, 58%);
  }
  
  /*
  ===================================
  Global styles
  ===================================
  */
  
  body {
    font-family: 'Lora', serif;
    background-color: var(--dark);
    color: var(--light);
    padding: 4rem 8.75rem;
    max-width: 107.5rem;
    margin: 0 auto;
    font-size: 1.25rem;
  }
  
  body *::selection {
    background-color: hsla(46, 86%, 58%, 0.8);
    color: var(--dark);
  }
  
  h1 {
    padding-bottom: 1rem;
  }
  
  h2 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.25rem;
  }
  
  button {
    border: none;
    background: none;
    color: var(--light);
    cursor: pointer;
  }
  
  a {
    color: var(--light);
  }
  
  a:hover {
    color: var(--gold);
    transition: 0.3s;
  }
  
  button {
    text-decoration: underline;
  }
  
  button:hover {
    color: var(--gold);
    transition: 0.3s;
  }
  
  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: var(--light);
    color: var(--dark);
    text-align: center;
    padding: 5px 1rem;
    position: absolute;
    z-index: 1;
    bottom: 160%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
  
/*
===================================
Main
===================================
*/

.instructions {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  /*
  -----------------------------------
  Colors
  -----------------------------------
  */
  
  .colors-block {
    width: 4rem;
    height: 4rem;
    border: solid 2px var(--light);
    border-radius: 50%;
  }
  
  .colors-block:hover {
    cursor: pointer;
  }
  
  /* 
  -----------------------------------
  Top section
  -----------------------------------
  */
  
  .top-section {
   ...

JavaScript

/**
 * ******************************************************************************************
 * Global variables
 * ******************************************************************************************
 */

// Select the generated colors block
const $generatedColors = document.getElementById("generatedColors");

// Make an array from the generated colors and input colors, so we can manipulate them
let generatedColorBlocks = Array.from($generatedColors.children);
const inputColorBlocks = Array.from(
  document.getElementById("inputColors").children
);

/**
 * ******************************************************************************************
 * Get random number for RGB color
 * ******************************************************************************************
 */

function getRandomNumber(number) {
  return Math.floor(Math.random() * number);
}

/**
 * ******************************************************************************************
 * Generate random RGB color
 * ******************************************************************************************
 */

function genRandomRgbColor() {
  const maxColorValue = 256; // 255, but as we are using Math.floor, we need to add 1
  return `rgb(${getRandomNumber(maxColorValue)}, ${getRandomNumber(
    maxColorValue
  )}, ${getRandomNumber(maxColorValue)})`;
}

/**
 * ******************************************************************************************
 * Generate random colors array
 * ******************************************************************************************
 */

function genRandomColorsArray(arrayLength) {
  // Create an empty array to store the colors
  let colorsArray = [];

  // Loop over the array length
  for (let i = 0; i < arrayLength; i++) {
    // Generate a random rgb color
    let randomColor = genRandomRgbColor();

    // Check if the color already exists
    while (colorsArray.includes(randomColor)) {
      // If the color already exists, generate a...