JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
  <div id='quiz-wrapper' class="content">
  </div>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="script.js"></script>
  <script>
    var newquiz = {};
    quiztogo.call(newquiz, 'quiz-wrapper');

    var allQuestions = [{
      question: "What is the capital of Florida?",
      choices: ["Miami", "Orlando", "Tallahassee", "Cape Canaveral"],
      correctAnswer: 3
    }, {
      question: "Where do the Cowboys play football?",
      choices: ["Houston", "Dallas", "Galveston", "The Pan-handle"],
      correctAnswer: 2
    }, {
      question: "Where was George Washington before he crossed the Delaware?",
      choices: ["Trenton, NJ", "Philadelphia, PA", "Galveston, TX", "Valley Forge, PA"],
      correctAnswer: 1
    }, {
      question: "Where do the Packers play football?",
      choices: ["Madison", "Milwaukee", "Seattle", "Green Bay"],
      correctAnswer: 3
    }, {
      question: "What state is closest to the Pacific ocean?",
      choices: ["Oregon", "Nevada", "Idaho", "Arizona"],
      correctAnswer: 1
    }, {
      question: "Where do the Texans play football?",
      choices: ["Houston", "Dallas", "Galveston", "The Pan-handle"],
      correctAnswer: 1
    }, {
      question: "Where do the Eagles play football?",
      choices: ["Houston", "Dallas", "Philidelphia", "California"],
      correctAnswer: 3
    }, {
      question: "Where do the Seahawks play football?",
      choices: ["Seattle", "Dallas", "Galveston", "California"],
      correctAnswer: 1
    }];

    allQuestions.forEach(function (question) {
      newquiz.add(question);
    });

    newquiz.start();
  </script>
</body>

CSS

body {
  margin: 0;
  font-family: 'Arvo', serif;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  background-color: #333132;
  padding: 20px
}

.content {
  background-color: #333132;
  width: auto;
}

.quiz {
  max-width: 375px;
  padding: 20px;
  margin: auto;
}

.choice {
  background-color: #524F50;
  margin: 2px 0;
  padding: 10px;
  left: 0;
  -moz-transition: all 0.5s, background-color 0.5s;
  -webkit-transition: all 0.5s, background-color 0.5s;
  -o-transition: all 0.5s, background-color 0.5s;
  transition: all 0.5s, background-color 0.5s;
}

.choice.big {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.choice.big input[type=radio] {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.choice.chose {
  background-color: #BBBD95;
}

.choice.wrong {
  background-color: #CF5B85;
}

.choice.correct {
  background-color: #6CBA76;
}

.question {
  background-color: #524F50;
  padding: 10px 20px;
}

.buttons {
  float: right;
}

.result {
  text-align: center;
  padding: 20px;
  margin: auto;
  display: none;
}

.result div {
  background-color: #524F50;
  padding: 10px 20px;
  display: inline-block;
}

JavaScript

(function($, window) {
  'use strict';

  var quiz = function(id) {
    var questions = [];
    var total = 0;
    var quizstructure = {};
    var currentQuestion;
    var _tmpqsts = [];

    var error = {
      NOANSWER: 'You have to choose an answer to continue.',
      NOELEMENTID: 'Could not find any element with this ID.',
      NOQUESTION: 'You have to specify a question to be asked.',
      NOCHOICES: 'You have to specify choices.',
      INVALIDCORRECTANSWER: 'You have to specify a correct answer and within the range of choices.'
    };

    var setupStructure = function() {
      var $container = $('#' + id),
        $quiz, $question, $choices,
        $buttons, $result;

      if ($container.length === 0) {
        throw error.NOELEMENTID;
      }

      $result = $('<div>').addClass('result').appendTo($container);
      $quiz = $('<div>').addClass('quiz').appendTo($container);
      $question = $('<div>').addClass('question').appendTo($quiz);
      $choices = $('<div>').addClass('choices').appendTo($quiz);
      $buttons = $('<div>').addClass('buttons').appendTo($quiz);


      quizstructure = {
        quiz: $quiz,
        question: $question,
        choices: $choices,
        buttons: $buttons,
        result: $result
      };
    };

    var showQuestion = function(qst) {
      var structure = quizstructure,
        choices = qst.choices,
        question = qst.question,
        $radio;

      $('<h2>').text(question).appendTo(structure.question);
      $radio = $('<input>').attr({
        'type': 'radio',
        'name': 'answer',
        'class': 'answer'
      });

      choices.forEach(function(choice, index) {
        $('<div>').addClass('choice')
          .append($radio.clone().data('answer', index))
          .append(choice)
          .wrapInner('<label>')
          .appendTo(structure.choices);
      });
    };

    var setupButtons = function() {
      var $nextbutton,
        $buttons = quizstructure.buttons;

      $nextbutton =...