JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="exercise-entry">
  <p>
    Welcome to the interview exercise.
  </p>
  <p>
    This is a pure technical exercise, no word-twisting, catches or deceitful loopholes.
  </p>
  <p>
    Feel free to use any tool at your disposal, be it command line, Google, Stack Overflow,...<br />
    If you're comfortable with JavaScript, use it, if with Java, use that, same for Bash.
  </p>
  <p>
    There are several random keywords sprinkled through the exercise. Your job is to collect as many of them as you can.<br /><br />
    Our aim is to see how you:
  </p>
  <ul>
    <li>know your tools</li>
    <li>behave under stress</li>
    <li>arrive to creative solutions</li>
    <li>find details about unrelated APIs</li>
    <li>interpret ambiguous requirements</li>
  </ul>
  <button id='start'>Start and <b>be fast!</b></button>
</div>

CSS

* {
  font-size: 18px;
  text-shadow : 0 0 0 black;
}

p, li, ul, hr, textarea {
  max-width: 400px;
  margin: 18px auto;  
}

#start {
  display: block;
  margin: 18px auto;
}

b.keyword {
  font-size: 24px;
}

#css-challenge-container {
  background-color: limegreen;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

#css-challenge-container .blue {
  background-color: azure;
  border: 1px solid blue;
  color: blue;
  line-height: 100px;
  width: 100px;
  height: 100px;
}

#css-challenge-container .blue:first-child {
  position: absolute;
  top: 50px;
  left: 50px;
}

#css-challenge-container .blue:nth-child(2) {
  position: absolute;
  top: 50px;
  right: 50px;
}

#css-challenge-container .gold {
  background-color: gold;
  width: 50px;
  height: 50px;
  color: orange;
  border: 1px solid orange;
  z-index: 2;
}

#css-challenge-code {
  width: 400px;
  height: 200px;
}

JavaScript

//Nice...you've found the source code
// One more keyword: 'COIN'
$(document).ready(function() {
  const originalDate = Date;
  const originalDateNow = Date.now;
  const keywords = ['MONKEY', 'IRON', 'ROPE', 'KITE', 'WIND', 'ROOF', 'BUTTERFLY', 'ENVELOPE', 'TREE', 'WALL', 'CLOUD'];
  
  function getKeyword(ordinal) {
    const d = new originalDate().getDate();
    return keywords[(d << ordinal) % keywords.length];
  }
  
  String.prototype.hashCode = function() {
    var hash = 0, i, chr;
    if (this.length === 0) return hash;
    for (i = 0; i < this.length; i++) {
      chr   = this.charCodeAt(i);
      hash  = ((hash << 5) - hash) + chr;
      hash |= 0;
    }
    return hash;
  };
  
  console.log('%cOne more keyword: ' + getKeyword(0), "font-size: 24px;");
  
  
  $('#start').on('click', showSumChallenge);
  
  function showSumChallenge() {
    $('.exercise-entry').remove();
    var total = 0;
    $("body").append("<div id='counting-exercise'></div>");
    $("#counting-exercise").append("<p>The first task is to sum all the numbers on screen and write the value into the input box at the bottom.<br /></p>");
    $("#counting-exercise").append("<hr />");
    
    const temp = new Array(10);
    temp.fill(0);
    temp.forEach(function(e) {
      const n = (Math.random() * 1000) | 0;
      total += n;
      $("#counting-exercise").append("<p class='number'>" + n + "</p>");
    });
    
    $('#counting-exercise').append("<p><input id='sum' /><button id='counting-exercise-submit'>Submit</button></p>");
    $('#counting-exercise').append("<p><button id='skip'>Skip this exercise</button></p>");
    const countingExerciseStart = originalDateNow();
    $('#skip').click(function() {
      $('#counting-exercise').remove();
      showHashChallenge();
    });
    $('#counting-exercise-submit').click(function() {
      const timeTaken = originalDateNow() - countingExerciseStart;
      const correct = ($('#sum').val() | 0) === total;
     ...