JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="quiz-game-container">


<div class="quiz-game">
			
			<div class="row" id="q1">
				<div class="quiz-container col-xs-12 col-md-8 col-md-offset-2 text-center">
					<p class="current-question-number"> 1/20 </p>
					<div class="question">
						<h2> What is &#34;The Pantheon&#34;? </h2>
						
							<p> <i>[There is 1 correct answer]</i> </p>
						
					</div>
					
					<div class="helper col-sm-6">
						<div class="possible-answers col-xs-12 col-sm-12">
							<p> The name of the continent, on which Path of Exile takes place </p>
						</div>
					</div>
					
					<div class="helper col-sm-6">
						<div class="possible-answers col-xs-12 col-sm-12">
							<p> A unique enemy, who can be spawned by a prophecy </p>
						</div>
					</div>
					
					<div class="helper col-sm-6">
						<div class="possible-answers col-xs-12 col-sm-12">
							<p> Upon defeating a god, the Pantheon grants a defensive bonus
              Upon defeating a god, the Pantheon grants a defensive bonus</p>
						</div>
					</div>
					
					<div class="helper col-sm-6">
						<div class="possible-answers col-xs-12 col-sm-12">
							<p> The Pantheon can only be...

CSS

.quiz-game-container .quiz-container .question {
	-webkit-box-shadow: 3px 4px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 4px 7px -2px rgba(0,0,0,0.75);
    box-shadow: 3px 4px 7px -2px rgba(0,0,0,0.75);
    background-color: #6d5f4b;	
    margin: 1px 8px 10px 8px;
    padding: 15px;
}

.quiz-game-container .quiz-container .question p {
	font-size: 12px;
}

.quiz-game-container .quiz-container .current-question-number {
	text-align: right;
    margin-right: 8px;
    font-size: 12px;	
}

.quiz-game-container .quiz-container .possible-answers  {
	-webkit-box-shadow: 3px 4px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 4px 7px -2px rgba(0,0,0,0.75);
    box-shadow: 3px 4px 7px -2px rgba(0,0,0,0.75);
    background-color: rgb(97, 85, 67);	
    padding: 10px;
    cursor: pointer;
}

.quiz-game-container .quiz-container .helper  {
	padding: 8px;
}

.quiz-game-container .quiz-container .possible-answers:hover  {
    background-color: #615543;	
}

.quiz-game-container .quiz-container p, .quiz-game-container .quiz-container h2 {
	color: white;
	margin: 0;
}

.quiz-game-container .quiz-container .additional-info {
	margin-bottom: 20px;
}

.quiz-game-container .quiz-container .additional-info p {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
}

.quiz-game-container .quiz-container .answer {
	margin: 10px 0 20px 0;
}

.quiz-game-container .quiz-container .answer p {
	font-size: 12px;
	font-weight: 300;
}

.quiz-game-container .quiz-container .answer p.number-questions-error {
	display: none;
	color: #ff7575;
}

.quiz-game-container .quiz-container .answer .answer-btn  {
    background-color: #f7f3aa;
    color: black;
    font-weight: 300;
    border-radius: 0;
    width: 100%;	
    max-width: 250px;
}

.quiz-game-container .quiz-container .answer .answer-btn:hover {
    background-color: #f3e000;
}