JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<span style="color:#000; font-size:10pt;">
	
	<div id="geral">
	
		<b>Selecione qual plano deseja divulgar e veja seus ganhos em cada opção:</b><br/><br/><br/>
			<!--plain full describe-->
			<div id="passo1">
					   <div id="b1">	
							<div class="img-box">
								<img src="ico-antivirus-full.jpg" alt="Plano Full UOL Antivírus" title="Plano Full UOL Antivírus"/>
							</div>
							
							<div class="txt-box">
								<img src="ico-antivirus-full-txt.jpg" alt="Plano Full UOl Antivírus" title="Plano Full UOL"/>
								<p span style="align:center">Antivírus + Firewall + Controle dos Pais + <br/>
									Consultor de Navegação + Antispyware + <br/>
									Proteção de Dados Pessoais.</p>
							</div>
						</div>

					<!--plain fit describe-->
					  <div id="b2">	
							<div class="img-box">
								<img src="ico-antivirus-fit.jpg" alt="Plano Fit UOL Antivírus" title="Plano Fit UOL Antivírus"/>
							</div>
							
							<div class="txt-box">
								<img src="ico-antivirus-fit-txt.png"alt="Plano Fit UOl Antivírus" title="Plano Fit UOL"/>
								<p>Antivírus - Seu computador livre de vírus.</p>
							</div>
					 </div>
					 
					 <div style="clear:both"> </div>
					 
					 <!--Select dos Planos UOL Antivírus-->
			
						 <div class="box-select">
							 
							  <!--quadrado1-->
							 
							  <div class="box-plan">
										<div class="bg-title">
											
											<input type="radio" name="full1" value="FULL PROMOCIONAL" id="full-pr"/>
											<b>FULL PROMOCIONAL</b>
											
										</div>
										
										<div class="bg-txt">
											<p>Você oferece o primeiro mês grátis para o usuário.<br/><br/>
													
											   Você recebe a partir da:<br/>
												2&#170; mensalidade: 50%*<br/>
												3&#170; até a 7&#170; mensalidade 20%*		
										
											</p>
										</div>
								</div>		
								
								<!--quadrado2-->
								<div class="box-plan">
										<div class="bg-title">
											...

CSS

body{margin:0; padding:0;background:#fff;}
	
    #geral{width:980px; margin: 0 auto;} 
	
	#b1,#b2{width:480px; float:left;}
	
	.img-box{width:100px;
	         float:left;
			 margin-left: 35px;}
	
	.txt-box{width:300px;float:left;text-align:center;}
	
	.box-select{width:956px;height:181px;}
	
    .box-plan{float:left;
				width:221px;
				height:215px;
				border:1px solid #D8D8D8;
				margin:8px;}
				
	
	.bg-title{padding-top:5px;
			  margin:3px; width:210px; 
			  height:46px;}
	
	.bg-title{background-image: url("./bg-color-table-antivirus-link.png");
			  width:215px; 
			  height:46px; 
			  no-repeat; 
			  text-decoration:none;
			  margin:3px;}
			  
	
	.bg-title:hover{background-image: url("./bg-color-table-antivirus-hover.png");
					width:214px; 
					height:46px; 
					no-repeat; 
					border:1px solid #DD9C76;
					margin:3px;}
					
					  
	.bg-txt{margin:4px;
			border-top:3px dotted #E6E6E6;}
					  
	

	.clearfix:after{visibility: hidden;
					display: block;
					font-size: 0;
					content: " ";
					clear: both;
					height: 0;}

	*:first-child+html .clearfix { zoom: 1; } /* IE7 */
   

	.bg-title input{margin-left:10px; margin-top:10px;}   
	.orangeBtn{
		display:block;
		cursor:pointer;
		/*width:140px;*/
		height:28px;
		position:relative;
		padding: 0!important;
		float: left;
    	margin-left: 10px;
	}
	
		.orangeBtn input{
			border:0px;
			background:transparent url(http://afiliados.i.uol.com.br/layout/orange-btn-middle.jpg) repeat-x top left;
			color:#fff;
			cursor:pointer;
			font-weight:bold;
			width:100%; 
			height:28px;
		}
		
		.orangeBtn.hover-bnt input{
			background:transparent url(http://afiliados.i.uol.com.br/layout/orange-btn-middle-over.jpg) repeat-x top left;
		}
	
		.orangeBtn span.left{
			background:url(http://afiliados.i.uol.com.br/layout/orange-btn-left.jpg) no-repeat top left;
			display:block;
			cursor:pointer;
			float:left;
			width:3px; height:28px;
			position:absolute; top:0;...

JavaScript

//validando o passo 1 se foi selecionado um input para continuar 
			$("#getNext").click(function(){
			    var inputSelecione = $('input[name=full1]:checked').val();
                if(inputSelecione){
                    alert("Você selecionou o " + inputSelecione);
					$("#passo1").hide();
					$("#passo2").show();
                } else {
                    alert("Escolha um item");
                }
					
					   
			});
			
		// validando o passo 2, pegando idtURL e idtLabel para continuar	
			
			
			$("#advertiseSite").change(function () { 
				     emptyCheck("#advertiseSite");
		    });
			
			
			 function emptyCheck(id) 
				{
				   var idtUrl    = $(id).val();
				   var idtLabel = $("#advertiseIdentifier").val();
					$("#getNext2").click(function() {  
						if (idtUrl !="nenhum")
						  {
							$("#passo2").hide();			
							$("#passo3").show();
						  }
					     else
                         {
						   alert("Você deve selecionar ao menos um site para prosseguir!!!");
						 
			         	 }						 
				
				    });	
				}