JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
<section class="content container-fluid" id="quiz">
  <button class="btn btn-primary" id="next">Next</button>
  <button class="btn btn-info" id="prev">Prev</button>
  <button class="btn btn-default" id="start">Start Over</button> 
  <ul id="result-input" class="hide-input">
    <li><input type="checkbox" name="answer" value="0">1</li>
    <li><input type="checkbox" name="answer" value="1">2</li>
    <li><input type="checkbox" name="answer" value="2">3</li>
    <li><input type="checkbox" name="answer" value="3">4</li>
    <li><input type="checkbox" name="answer" value="4">5</li>
    <li><input type="checkbox" name="answer" value="5">6</li>
  </ul>
 </section>

CSS

@charset "UTF-8";
/* CSS Document */

body {
	font-family: 'Fjalla One', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	background: url(http://sf.co.ua/14/01/wallpaper-363993.jpg);
}

input[type="checkbox"]{
    width: 50px;
    height: 35px;
}

.input-before:before{
	background-color: rgba(51, 175, 223, 0.39) !important;
}

.hide-input{
  display:none;
}
.show-input{
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 147px;
  
}
.content {
	background-color: #eee;
	width: 75%;
	max-width: 800px;
	min-height: 170px;
	box-shadow: 5px 5px 9px #333;
}

#quiz {
    display:none;
	margin-top: 50px;
	font-size: x-large;
}

ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 10px;
	font-size: smaller;
}

input[type="radio"] {
	margin-right: 15px;
}
button {
	position: relative;
    float:right;
	margin-left: 5px;
	margin-top: 15px;
}

#prev {
    display:none;
}

#start {
    display:none;
    width: 90px;
}

#warning {
	color: #800000;
	font-weight: bold;
	margin-top: 25px;
}


input[type=checkbox] {
	position: relative;
	cursor: pointer;
    width: 1px;
    height: 1px;
    border: 0;
    margin: -1px;
    clip: rect(0,0,0,0);
}
input[type=checkbox]:before {
	content: "";
	display: block;
	position: absolute;
	width: 33px;
    height: 33px;
	top: 0;
	left: 0;
	border: 2px solid #40acdb;
	border-radius: 3px;
    background-color: white;
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 12px;
    height: 40px;
    border: 4px solid #40acdb;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: -14px;
	left: 19px;
	
}


@media(max-width: 767px){
	#start {
		margin-left: 25px;
	}
}

JavaScript

// JavaScript Document
$(document).ready(function(){
  "use strict";
  
  var questions = [{
    question: "Whois usa president?",
    choices: ['Trump', 'Biden'],
    correctAnswer: 0
  }, {
    question: "What is the capital of Australia?",
    choices: ["Melbourne", "Sydney",],
    correctAnswer: 1
  }, {
    question: "Who is the prime minister of the U.K.?",
    choices: ['Tony Blair','Kane'],
    correctAnswer: 0
  }, {
    question: "What is the first perfect number?",
    choices: [38, 6, 0],
    correctAnswer: 0
  },
   {
    question: "two plus?",
    choices: [1, 2, 3],
    correctAnswer: 1
  },
   {
    question: "Is kenyain africa?",
    choices: ['Yes', 'No'],
    correctAnswer: 0
  }
  ];
  
  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('.content'); //Quiz div object
  
  // Display initial question
  displayNext();
  
  // Click handler for the 'next' button
  $('#next').on('click', function (e) {
    e.preventDefault();
    
    // Suspend click listener during fade animation
    if(quiz.is(':animated')) {        
      return false;
    }
    choose();
    
    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      $('#warning').text('Please make a selection!');
    } else {
      questionCounter++;
      displayNext();
	  $('#warning').text('');
    }
  });
  
  // Click handler for the 'prev' button
  $('#prev').on('click', function (e) {
    e.preventDefault();
    
    if(quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });
  
  // Click handler for the 'Start Over' button
  $('#start').on('click', function (e) {
    e.preventDefault();
    
    if(quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
  });
  
  // Creates and returns the div that contains the questions and 
  // the...