JSFiddle - React, Tailwind, and code Playground

HTML

<div class="question" id="first">Какой сейчас год?
	<div class="answers">
		<div class="answer" id="one">2100</div>
		<div class="answer" id="two">1900</div>
		<div class="answer" id="three">2018</div>
	</div>
</div>

<div class="question" id="second">Какого цвета небо?
	<div class="answers">
		<div class="answer" id="four">Черного</div>
		<div class="answer" id="five">Голубого</div>
		<div class="answer" id="six">Желтого</div>
	</div>
</div>

<div class="question" id="third">Нынешний президент РФ?
	<div class="answers">
		<div class="answer" id="seven">Буш</div>
		<div class="answer" id="eight">Путин</div>
		<div class="answer" id="nine">Душ</div>
	</div>
</div>

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}

.question{width: 380px;height: 100px;background: #009ee5;font-size: 25px;color:  #fff;text-align: center;margin-bottom: 10px;}

.answers{
	width: 100%;
	height: 40px;
	/* background: #8f6d61; */
}

.answer{
	width: 120px;
	height: 40px;
	/* position:  relative; */
	background: #673AB7;
	display:  inline-block;
	line-height: 40px;
	text-align:  center;
	cursor:  pointer;
}

.answer:hover{
	background: #3e1a7d;
}

#second, #third{
	display: none;
}

JavaScript

document.querySelector('#three').addEventListener('click',()=> {
	document.querySelector('#first').style.display = 'none';
	document.querySelector('#second').style.display = 'block';
},false);

document.querySelector('#five').addEventListener('click',()=> {
	document.querySelector('#second').style.display = 'none';
	document.querySelector('#third').style.display = 'block';
},false);

document.querySelector('#eight').addEventListener('click',()=> {
	document.querySelector('#first').style.display = 'block';
	document.querySelector('#third').style.display = 'none';
},false);