JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Quiz</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="App.js"></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
</body>
</html>

CSS

body {
    background-image: url('http://www.wallng.com/images/2013/10/background-backgrounds-176711.jpg');
    font-size: 62.5%;
    color: #dde9ff;
    left: 0;
    right: 0;
    top: 0;
    font-family: monospace;

}
.answer {
    margin-top: 1%;
    margin-left: 3%;
}
#quizArea {
    font-size: 2em;
    color: #e9ffdd;
    margin-left: 21%;
}
#ask {
    margin-top: 28%;
}
#next,#again {
    margin-top: 3%;
    margin-left: 70%;
    position: absolute;
    bottom: 5%;
    font-size: 1.5em;
    cursor: pointer;
}
#prev {
    margin-top: 3%;
    margin-left: 30%;
    position: absolute;
    bottom: 5%;
    font-size: 1.5em;
    cursor: pointer;
}
#total {
    font-size: 3.5em;
    margin-top: 23%;
    text-align: center;
    color: plum;
}
.warnBox {
    position: absolute;
    border-radius: 10%;
    background-color: red;
    width: 25%;
    height: 5%;
    left:0;
    right:0;
    margin-top: -15%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    color: black;
    font-size: 2em;
}

JavaScript

var theQuiz;
$.ajax({
    dataType: "json",
    //async: false,
    url: "https://dl.dropboxusercontent.com/s/fmw63i4v7dtnx6t/package.json",
    success: function (json) {
        theQuiz = json.quiz;
        console.log(json);
        console.log(theQuiz);

    }
});

$(function () {
    'use strict';
    var totalScore = 0,
        i = 0,
        selectedAnswers = [],
        $body = $('body'),
        p = '<p></p>',
        quiz,

        quizLength = theQuiz.length;
    quiz = {
        config: {
            animateSpeed: 1000
        },
        showQuestion: function () {
            var quizChoicesLength,
                quizArea,
                j;
            $body.append($("<ol></ol>", {
                id: 'quizArea'
            }).fadeIn(quiz.config.animateSpeed));
            quizArea = $('#quizArea');
            quizArea.append($(p, {
                id: 'ask',
                text: theQuiz[i].question
            }));
            quizChoicesLength = theQuiz[i].choices.length;
            for (j = 0; j < quizChoicesLength; j++) {
                quizArea.append($('<input>', {
                    type: 'radio',
                    name: 'choices',
                    'class': 'answer',
                    value: j
                }), theQuiz[i].choices[j], '</br>');
            }
        },
        checkAnswers: function () {
            var quizLength = theQuiz.length,
                i = 0;
            for (i; i < quizLength; i++) {
                if (theQuiz[i].correctAnswerIndex === (parseInt(selectedAnswers[i], 10))) {
                    totalScore++;
                }
            }
        },
        mustSelectAnswer: function () {
            if (!selectedAnswers[i]) {
                var $warnBox = 0;
                if (!$warnBox.length) {
                    $body.append($('<div>', {
                        'class': 'warnBox',
                        text: 'Please choose an answer'
                    }));
                    $warnBox =...