JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a href="./index.html" class="navbar-brand">Quiz Fiend</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar6">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse justify-content-stretch" id="navbar6">
          <ul class="navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="./index.html">Home</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
              </li>
          </ul>
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link" href="#">Login</a>
              </li>
          </ul>
      </div>
  </nav>

  <!-- Quiz Area -->
  <div class="quizBackground container-fluid">
    <!-- Quiz Start Area Div -->
    <div class="quizArea row">
      <div class="col-lg-12 col-md-12" id="quizStartDiv">
        <h1>The History Quiz</h1>
        <h2>Think you know your stuff?</h2><br><br>
        <input type="button" id="startQuizBtn" value="Start this Quiz"/><br><br>
        <a href="./leaderboards.html"><input type="button" id="viewLeaderBtn" value="View Leaderboards"/></a>
      </div>
      <!-- Quiz Question Area Div | Replaces Start Area when start btn clicked -->
      <div class="col-lg-12 col-md-12" id="quizQuestionDiv">
        <h2 id="questionText"></h2><br>
        <div class="answerArea">
          <p><label for="radio1" id="option1Text"></label><input type="radio" name="option" id="radio1" value="0"/></p>
          <p><label for="radio2" id="option2Text"></label><input type="radio" name="option" id="radio2"...

CSS

/* Styling for whole site */
body {
  font-family: helvetica;
  background-color: #F5F5F5;
}

h1 {
 font-size: 62px;
}

input[type=button] {
  font-size: 18px;
  color: #F5F5F5 ;
  background-color: teal;
  border: none;
  border-radius: 5px;
  padding: 10px 60px;
}

input[type=button]:hover {
  cursor: pointer;
}

/* Styling the homepage area */
.welcomeArea {
  margin-top: 50px;
  text-align: left;
  color:
}

.quizSelectionArea {
  margin-top: 30px;
  text-align: center;
}

.quizThumb {
  height: auto;
  overflow: hidden;
  border: solid 1px;
}

.quizHist {
  background-color: lightgreen;
}

.quizPhil {
  background-color: skyblue;
}

.quizWar {
  background-color: pink;
}

.quizTitle {
  width: 100%;
  height: 120px;
  left: 0.2px;
  bottom: 0;
  position: absolute;
  padding: 10px;
  color: #eee;
  background-color: rgba(0, 0, 0, 0.7);
  line-height: 1.2em;
  text-align: center;
}

.quizImg {
  padding-top: 15px;
}

/* Quiz page styling */
.quizBackground {
  height: 535px;
  background-image: url("./images/histBg.PNG")
}

.quizArea {
  height: 100%;
  color: #F5F5F5;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 75px 0px 45px 0px;
}

/* Padding inbetween back and next buttons */
.quizBtn {
  margin: 0 15px;
}

/* Create space between radio button and answer text */
#radio1, #radio2, #radio3 {
  margin-left: 10px;
}

#quizStartDiv {

}

/* Hide Quiz Question and Result Div's until triggered by Start Btn/Submit answers Btn */
#quizQuestionDiv {
    display: none;
}

#quizResultDiv {
  display: none;
}

/* Registration and Login Page */
.regArea {
  text-align: center;
}

#regConf {
  color: green;
}

JavaScript

// QUIZ JS //

$(document).ready(function(){
  // Variable that stores quiz questions
  var histQuestions;
  var philQuestions;
  var warQuestions;

  // AJAX request for questions in external JSON //
  var questionRequest = new XMLHttpRequest();
  questionRequest.open('GET', 'https://jsonblob.com/api/jsonBlob/3b8d30cd-da5a-11e7-b7f1-6fb2b2968465');
  questionRequest.onload = function() {
    histQuestions = JSON.parse(questionRequest.responseText);
  };
  questionRequest.send();

  var answers = document.getElementsByName("option")
  var userScore = 0;
  var questionCounter = 0;
  var progressBar = document.getElementById("progressBar")

  // Variables containing references to HTML elements to contain question data //
  var questText = document.getElementById("questionText");
  var ans1Text = document.getElementById("option1Text");
  var ans2Text = document.getElementById("option2Text");
  var ans3Text = document.getElementById("option3Text");
  var userChoice;

  // Hide Start Area Div and display first question when user clicks Start Btn //
  $("#startQuizBtn").click(function(){
    $("#quizStartDiv").hide();
    $("#quizQuestionDiv").fadeIn("slow");
    questText.innerHTML=(histQuestions.historyQuestions[questionCounter].Question);
    ans1Text.innerHTML=(histQuestions.historyQuestions[questionCounter].choices[0] + " ");
    ans2Text.innerHTML=(histQuestions.historyQuestions[questionCounter].choices[1] + " ");
    ans3Text.innerHTML=(histQuestions.historyQuestions[questionCounter].choices[2] + " ");
  });

  // Update question area with next question when user clicks Next Btn //
  $("#quizNextBtn").click(function() {
    userChoice = ($('input[name="option"]:checked').val());

    // If no radio button checked: alert user. If correct answer checked: add 1 to user score //
    if (userChoice == null) {
      alert("Please choose an answer before proceeding!");
      return;
    } else if (userChoice == histQuestions.historyQuestions[questionCounter].answer) {
...