JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative; background-image: url(https://i.imgur.com/rRlTkrf.jpg); width: 688px; height: 500px; margin-left: -8px; font-family: Arial; font-size: 12px;">

  <img src="https://i.imgur.com/mxbCqhj.png" style="position: absolute; pointer-events: none; z-index: 2;">

  <!-- EXPLANATION -->
  <div class="explanation" style="position: absolute; z-index: 1;">
    <div style="position: absolute; left: 10px; top: 95px; width: 668px; height: 310px; background-color: #333332; border-radius: 6px;"></div>
    <div style="overflow: auto; position: absolute; left: 20px; top: 115px; width: 203px; height: 270px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #f7cd5b;">Hello<br><br>

      It is with regret that the News Team has to inform you that this month’s magazine set has been stolen. Yesterday a thief broke into our office and managed to get away with the outfit. Fortunately the thief made quite a mess and there is even a rumour about a witness. Now, normally we would investigate the matter as soon as possible, but due to deadlines we currently don’t have the time. If you want the set, you’re going to have to find and confront the thief yourself.<br><br>

      Good luck!
    </div>
    <div style="overflow: auto; position: absolute; left: 233px; top: 115px; width: 435px; height: 270px; text-align: justify; color: #f7cd5b;"><b>Game explanation</b><br>
      First you want to click on the “suspects” button on the top right, it will get you an overview of the suspects. The three hints on the bottom left will help you figure out which five suspects aren’t suspicious. Each hint will let you rule out one or more suspects. You can hover a suspect to discover a little more about them, this information will be used in the hints.<br><br>

      When you’ve ruled out someone as a suspect you can click them and they will turn grey. This way you can keep track of who is and isn’t suspicious. If you’ve figured out who’s the thief you can...

CSS

.suspect_info {
  position: absolute;
  width: 216px;
  height: 150px;
  border-radius: 6px;
  background-color: rgba(255, 168, 124, 0.9);
  font-size: 15px;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: all 1s ease;
}

.suspect_info:hover {
  opacity: 1;
  cursor: pointer;
}

.accuse {
  position: absolute;
  left: 10px;
  bottom: 14px;
  width: 196px;
  height: 20px;
  border: none;
  border-radius: 10px;
  background-color: #f7cd5b;
  font-family: 'Patrick Hand', cursive;
  color: #333332;
  transition: all 5s ease;
}

.accuse:hover {
  background-color: #fa50e4;
  cursor: pointer;
}

.hint.toggle_suspects {
  width: 130px;
}

.hint {
  position: absolute;
  width: 100px;
  height: 25px;
  border: none;
  border-radius: 6px;
  background-color: #333332;
  color: #f7cd5b;
  transition: all 1s ease;
}

.hint:hover {
  background-color: #1b1b1b;
  cursor: pointer;
}

.hint.reset_click {
  position: absolute;
  width: 25px;
  background-color: #fa5050;
  font-size: 16px;
  color: #fff;
  transition: all 1s ease;
}

.reset_click:hover {
  background-color: #e63a3a;
  cursor: pointer;
}

.dark_background,
.dark_background_lock {
  width: 688px;
  height: 500px;
  background-color: #333332;
  opacity: 0.8;
}

.confirmation {
  background-color: #fff6df;
  color: #333332;
  padding: 10px;
  box-sizing: border-box;
  width: 50%;
  left: 25%;
  top: 33%;
  border-radius: 10px;
}

.confirmation.correct_accusation {
  top: 30%;
  left: 12.5%;
  width: 75%;
}

.confirm {
  width: 120px;
  height: 30px;
  background-color: #d9ef5e;
  border-radius: 10px;
  border: 0px;
  transition: all 0.7s ease;
}

.confirm:hover {
  background-color: #bfd351;
  cursor: pointer;
}

.deny,
.close {
  width: 120px;
  height: 30px;
  background-color: #ef5e5e;
  border-radius: 10px;
  border: 0px;
  transition: all 0.7s ease;
}

.deny:hover,
.close:hover {
  background-color: #d74e4e;
  cursor: pointer;
}

.hint_container {
  background-color: #fff6df;
  color:...

JavaScript

$(document).on('click', '.toggle_suspects', function() {
  var toggle = $(this).html();
  if (toggle == 'Suspects') {
    $(this).html('Explanation');
    $('.suspect_container').show();
    $('.explanation').hide();
  } else {
    $(this).html('Suspects');
    $('.suspect_container').hide();
    $('.explanation').show();
  }
});

$(document).ready(function() {
  var checkPoint = localStorage.getItem('checkPoint');
  var cooldown = localStorage.getItem('inCooldown');
  if (checkPoint == null || cooldown == 1) {
    chooseCulprit();
    localStorage.setItem('checkPoint', 1);
  }
});

function chooseCulprit() {
  var cooldown = localStorage.getItem('inCooldown');
  if (cooldown == 1) {
    CooldownMechanics();
  } else {
    localStorage.clear();
    var culprit_number = Math.floor((Math.random() * 6) + 1);
    localStorage.culprit = culprit_number;
    magnify('myimage', 1.5);
    $('.suspect_info').parent().css('filter', 'grayscale(0)');
  }
}

$(document).on('click', '.suspect_info', function() {
  var greyscale = $(this).parent().css('filter');
  if (greyscale == 'grayscale(1)') {
    $(this).parent().css('filter', 'grayscale(0)');
  } else {
    $(this).parent().css('filter', 'grayscale(1)');
  }
});

magnify('myimage', 1.5);

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  $('.img_magnifier_glass').remove();
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img_magnifier_glass");
  img.parentElement.insertBefore(glass, img);
  var x = localStorage.getItem('culprit');
  if ('suspect_' + x === 'suspect_1') {
    glass.style.backgroundImage = "url('https://i.imgur.com/biWNnsx.png')";
  } else if ('suspect_' + x === 'suspect_2') {
    glass.style.backgroundImage = "url('https://i.imgur.com/FL1VS71.png')";
  } else if ('suspect_' + x === 'suspect_3') {
    glass.style.backgroundImage = "url('https://i.imgur.com/ersiQhD.png')";
  } else if ('suspect_' + x === 'suspect_4') {
   ...