JSFiddle - React, Tailwind, and code Playground

by Henrique Felix Miguel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="portlet box red">
	<div class="portlet-title">
		<div class="caption">
			<i class="fa fa-globe"></i>Perguntas
		</div>
	</div>
					
	<div class="portlet-body">
		
		<div class="row">
			<div class="col-md-12">
			
				<div class="col-md-9 col-md-offset-1">
					<div class="dashboard-stat red" style="border-radius:20px!important;background-color:orange;height:50px"  id="div_pergunta" >
						<div class="visual">
						
						</div>
						<div class="detail">
							<div class="number">
								<span id="pergunta"></span>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-md-12">
			
				<span id="div_botoes_1"></span>
				<span id="div_botoes_2"></span>
				<span id="div_botoes_3"></span>	
			
			</div><!-- :: COL MD 12 -->
		</div><!-- ::ROW :: -->
	</div>
</div>

CSS

.botao {
padding: 4px 11px;

border: 1px solid ;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
width:100%;
height:70px;

font-size:30px;
font-family:"Segoe UI";
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #666;

box-shadow: inset 0 1px 1px #fff, 0 2px 3px #666;
cursor:pointer;
position: relative;
}

.color1{
	background-color: red !important; /* vermelho */
}

.color2{
	background-color: #00BFFF !important; /* azul */
}

.color3{
	background-color: #00CD66 !important; /* verde */
}

.color1:hover {
	box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
	background: -webkit-gradient(linear, left top, left bottom, from(red), to(#ff6600)) !important;
}

.color2:hover {
	box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)) !important;
}

.color3:hover {
	box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#00CD66), to(#008B45)) !important;
}

.botao:active {
	box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;
	top:2px
}
.botao a, .botao a:active, .botao a:hover, .botao a:visited { color: #fff; text-shadow: 0 1px 0 #666; }

#local_resposta{
	
	border-radius:40px!important;
}

.number{
    text-align: center;
    font-size: 15px;
    color: black;
    font-weight: bold;
    padding-right: 30px;
	padding-top:15px;
}

#div_pergunta, #id_botao_1 , #id_botao_2 {
	
	display:none;
}

JavaScript

frase_script_primeira_execucao();
efeito_set_time_out();

function loop_html(id_1,id_2,resposta_1,resposta_2,link_1,link_2,qtd){	
	
	var id = [];  //crio o array 'id'
	id[1] = id_1; //atribuo o valor de ao primeiro array
	id[2] = id_2; //atribuo o valor de ao segundo array
			
	var resposta = []; //crio o array 'resposta'
	resposta[1] = resposta_1; //atribuo o valor de ao primeiro array
	resposta[2] = resposta_2; //atribuo o valor de ao segundo array
		
	var link = []; //crio o array 'link'
	link[1] = link_1; //atribuo o valor de ao primeiro array
	link[2] = link_2; //atribuo o valor de ao segundo array
				
	var pt_1 = []; //crio o array
	var pt_2 = []; //crio o array
	var pt_3 = []; //crio o array
	var pt_4 = []; //crio o array
	var pt_5 = []; //crio o array
	var pt_6 = []; //crio o array
	var html = []; //crio o array
			
	for(i = 1;i <= qtd; i++){ //aqui , eu crio os botoes que terao as opções de escolha do usuario
				
		pt_1[i] = '<div class="col-md-4 col-md-offset-1" id="id_botao_'+i+'">';
		pt_2[i] = '<div class="dashboard-stat red-thunderbird" id="local_resposta">';
		pt_3[i] = '<a href="'+link[i]+'" id="link_'+i+'">';
		pt_4[i] = '<button type="button" class="botao color'+i+'" id="btn_resposta_'+i+'" value="'+id[i]+'">';
		pt_5[i] = '<span id="texto_botao">'+resposta[i]+'</span>';
		pt_6[i] = '</button> </a> </div> </div>';
				
		html[i] = pt_1[i] + pt_2[i] + pt_3[i] + pt_4[i] + pt_5[i] + pt_6[i];	
		document.getElementById("div_botoes_"+i).innerHTML = html[i];
	}
    
    carrega_funco_botao(); // chama a funcao  , que executa depois de 2 segundos  , o cod que ao clicar no botao , realizara açao.
} //fim funcao loop html
		
function frase_script_primeira_execucao(){
					
	var id_1 = 2; //joga o retorno json na variavel id_1
	var id_2 = 3; //joga o retorno json na variavel id_2
	var link_1 = '#'; //pega o retorno e joga na variavel link_1
	var link_2 = '#'; //pega o retorno e joga na variavel link_2
	var resposta_1 = 'SIM'; //pega o retorno e joga na...