JSFiddle - React, Tailwind, and code Playground

by dexanscript

HTML

<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 id="mixColors" class="button button--cta">Check my mix</button>
            <a href="/" class="button">Start a new game</a>
          </div>
          <div class="line line--short"></div>
          <!-- Score -->
          <div>
            <h2>Current streak:</h2>
            <p id="score" class="score">0</p>
          </div>
       ...