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">
								PERGUNTA
							</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 #ffcc00;
-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;
}

.color2{
	background-color: blue !important;
}

.color3{
	background-color: green !important;
}

.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(blue), to(#ff6600)) !important;
}

.color3:hover {
	box-shadow: inset 0 2px 5px #fff, 0 2px 3px #666;
	background: -webkit-gradient(linear, left top, left bottom, from(green), to(#ff6600)) !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;
}

JavaScript

var id = [];  //crio o array 'id'
	id[1] = 2; //atribuo o valor de ao primeiro array
	id[2] = 3; //atribuo o valor de ao segundo array
			
var resposta = []; //crio o array 'resposta'
	resposta[1] = 'NAO'; //atribuo o valor de ao primeiro array
	resposta[2] = 'SIM'; //atribuo o valor de ao segundo array
			
var link = []; //crio o array 'link'
	link[1] = '#'; //atribuo o valor de ao primeiro array
	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 <= 3; 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];
}