JSFiddle - React, Tailwind, and code Playground

by Felipe Martinin

HTML

<div class="main-form-show">
                	<form class="my-form-radio">
						<label class="active"><input data-id="#form-show-item-1" type="radio" name="name" checked /> you'r here</label>
						<label> <input data-id="#form-show-item-2" type="radio" name="name" />Click here to change</label>
						<label><input data-id="#form-show-item-3" type="radio" name="name" /> click here too </label>
					</form>

					<div id="form-show-item-1" class="dinamic-form-content">
						<div class="col-md-6">
							<label>De: 
								<select>
									<option>Selecione o Aeroporto</option>
									<option>Congonhas</option>
									<option>Guarulhos</option>
								</select>
							</label>
						</div>
						<div class="col-md-6">
							<label>Para: 
								<select>
									<option>Seleciona o Local</option>
									<option>Congonhas</option>
									<option>Guarulhos</option>
								</select>
							</label>
							<label>Hora: 
								<select>
									<option>00</option>
									<option>01</option>
								</select>
								<select>
									<option>00</option>
									<option>01</option>
								</select>
							</label>
						</div>

						<div class="col-md-12">
							<label>Adultos: 
								<select>
									<option>0</option>
									<option>1</option>
								</select>
							</label>
							<label>Crianças: 
								<select>
									<option>0</option>
									<option>1</option>
								</select>
							</label>
							<label>Bebês: 
								<select>
									<option>0</option>
									<option>1</option>
								</select>
							</label>
						</div>	
						<button class="botao-2 centered" class="dinamic-form-content">Buscar</button>
					</div>
					<div id="form-show-item-2" class="dinamic-form-content">
						<p>teste</p>
					</div>			
                </div>

CSS

body {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAQACAIAAAAP+8yGAAACoklEQVR4Xu3dwQ0CMQxEUTtKvbRCC3RqjtwR3g3WSwP/MDOObaIlH89XdJ4VzQcAACBiZzcgMvs1AAAAAFCu3WiR3YCYcKMBACh2AKopgFJBA7Xoo4Fip1TQAEAtkmQASXZlalsAJLk/aC59AICdSQNJ7ge4DwRN0ORAbypociAHgsamliHWmlwkB7oKnZ0caH7lQA40v3LApmqRHPiBAsBCSvsOYCHFpuZkfZEcsCmbsqn2/XSbchGAHLApm3q9D6Cz07YAaB19oZWLaCAHbHoiwBf52BRADtiUTb1KAJAD384B8Gkbzx4APOyWAwAjlKCx6eQky4GgyYGgCZocAAiapSCAoLkPJBnA03QASZZkGgAoFVpHczKAWmQIVIsAAOxNARQ7AAB9kUEcQLn+/gCopgAAbjQ3Gg1cOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANV8aAAAAADwi7Pr/5+DVt2tAQAAgGK3I6oZUANEBgDQtigVACFoYQBhUwBBEzQAORA0NmVTOWBTADYlMptyEQCbEhnAOzsALjpPA88e6rJ3FUTmIi7Sm3IRF3ERkS1miaxUEFmpILJSURN6UyIT2QhlALHxIjKRiUxk+yKTPpGJbNInMpEN4sMARAawDBG06SIL2goi21UIGpFpcJlNjbFENuEQmQY0MGUaQEyZRBY0QRM0U6YpkwZEFjTrHFMmDTS/RCayKdOUacoUNH+4I2hENmX2AIhMZGMskWlgjCUyke2LNF5EJjINiExkGy8bL8uQCSIbxIlspcZFJn0iE1mpsEogsjGWi7iIi4jMRVzERfamAJaC52sAwEUANl5sCsCmXGRG89e6bEoDOWBTADmQAwBBk4MRAABJFjQAAIBqPvdrAPAGv7GBbaSCtb0AAAAASUVORK5CYII=");
background-attachment: fixed;
background-size: contain;
}

.main-form-show {
  background: #fff;
  padding: 20px;
  max-width: 500px;
  margin: auto;
  border-radius: 10px;
  margin-top: 250px;
  transition: 1s;
}


#form-show-item-2,
#form-show-item-3 {
	display: none;
}

.active {
  color: blue;
}

JavaScript

$('.my-form-radio input').change(function() {

      var section4 = $(this).attr('data-id');
        $(".my-form-radio label.active").removeClass("active");
        $(this).parent().addClass("active");
        $('.dinamic-form-content').hide();
        $(section4).fadeIn(800);

  });