JSFiddle - React, Tailwind, and code Playground

HTML

<div class="game">
    <h3>Who is this?</h3>
    
    <div id="namesOutput"></div>
</div>

CSS

.btn {
  border: 1px solid #fff;
  display: block;
  font-size: 18px;
  margin-bottom: 12px;
  padding-bottom: 14px;
  padding-top: 14px;
  width: 100%;
}
.btn:hover {
  background-color: #fff;
  color: blue;
  text-decoration: none;
  transition: all .3s;
}

.btn--correct,
.btn--correct:hover {
  background-color: green;
  border-color: green;
  color: white;
}

.btn--incorrect,
.btn--incorrect:hover {
  background-color: red;
  border-color: red;
  color: white;
}

JavaScript

$(document).ready(function() {
  var answers = 3;
    
  //
  // Retrieve JSON
  //
  $.getJSON("https://gist.githubusercontent.com/keenanpayne/ada118875c2a5c672cd3/raw/8a72fc99c71c911f497200a7db3cc07b2d98dc82/sample.json", function(result) {
    var staffNumber = 0;
    var correctAnswer = "";
    var correctAnswerID = Math.floor((Math.random() * 3) + 1);

    // Loop through set
    $.each(result, function(i, field) {
      staffNumber++;

      if (staffNumber == correctAnswerID) {
        correctAnswer = field.name;
      }

      // Output possible answers
      $("#namesOutput").append('<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>');

      // Break loop depending on level
      if (staffNumber === answers) {
        return false;
      }
    });


    //
    // Check answer
    //
    $(".gameBtn").click(function(e) {
      e.preventDefault();

      if ($(this).attr('title') == correctAnswerID) {
        $(this).addClass("btn--correct");
        $('.btn').not(".btn--correct").addClass("btn--incorrect");
      } else {
        $(this).addClass("btn--incorrect");

      }
    });
  });
});