JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css">
<div id="form-disponibilidad">
       <form name="disponibilidad" action="<?=(ENVIRONMENT == 'development')? 'http://cabau.local/cabau-hotels/www/availability': 'http://'.$dominio_cabau.'/availability'?>" method="post">
		<span><?=lang('zona')?></span>
		<label class="zona">
				<select name="zonas">
					<option value="" selected><?=lang('todas-zonas')?></option>
					<?php for ($i = 0; $i < count($zonas); $i++) { ?>
							<option value="<?php echo $zonas[$i] ?>"><?php echo $zonas[$i] ?></option>
					<?php } ?>		
				</select>
		</label>
		<span><?=lang('hotel')?></span>
		<label class="hotel">
				<select name="hotel">
					<option value=""  selected><?=lang('todos-hoteles')?></option>
					<?php foreach ($hoteles as $keyz => $hoteles_zona) {
							foreach ($hoteles_zona as $hotel) {
					?>
							<option value="<?=$hotel['codigo_webservice']?>" class="<?=$hotel['zona'] ?>"><?php echo $hotel['nombre'] ?></option>
					<?php } 
					 } ?>		
				</select>
		</label>
		<div class="llegada">
				<span><?=lang('llegada')?></span>
				<label>
					<select name="llegada-dia">
						<?php
						for($i = 1; $i <= 31;$i++){
							?><option value="<?=$i?>"><?=$i?></option><?php
						}
						?>		
					</select>
				</label>
				<label>
					<select name="llegada-mes">
						<?php
						foreach(array('jan','feb','mar','apr','may','jun','jul','ago','sep','oct','nov','dec') as $value => $montname){
							?><option value="<?=($value)?>"><?=$montname?></option><?php
						}
						?>		
					</select>
				</label>
				<label>
					<select name="llegada-ano">
						<?php
						for($i = 2013; $i <= 2020;$i++){
							?><option value="<?=$i?>"><?=$i?></option><?php
						}
						?>		
					</select>
				</label>
				<input name="llegada"  type="hidden">
		</div>
		<div...

CSS

#form-disponibilidad {
  position: relative;
}
#form-disponibilidad .toggle {
  display: none;
  font-size: 27px;
  padding: 15px 0;
  text-align: center;
  cursor: pointer;
  color: #444444;
  text-transform: uppercase;
}
#form-disponibilidad .toggle i {
  font-size: 45px;
  vertical-align: -5px;
    background:red;
}
#form-disponibilidad form {
  background: #EEE;
  padding: 40px 50px;
  width: 320px;
  position: absolute;
  top: 0px;
  z-index: 10;
}
#form-disponibilidad form > span {
  display: block;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#form-disponibilidad form label {
  position: relative;
  display: block;
  margin-bottom: 11px;
}
#form-disponibilidad form label span {
  display: block;
}
#form-disponibilidad form label input, #form-disponibilidad form label select {
  width: 100%;
}
#form-disponibilidad form div.llegada,
#form-disponibilidad form div.salida {
  position: relative;
}
#form-disponibilidad form div.llegada > span,
#form-disponibilidad form div.salida > span {
  display: block;
  text-transform: uppercase;
  margin-bottom: 9px;
}
#form-disponibilidad form div.llegada:after, #form-disponibilidad form div.llegada img,
#form-disponibilidad form div.salida:after,
#form-disponibilidad form div.salida img {
  position: absolute;
  width: 25px;
  height: 25px;
  content: "\f073";
  font-family: fontAwesome;
  right: -4px;
  bottom: 11px;
  font-size: 22px;
}
#form-disponibilidad form div.llegada img,
#form-disponibilidad form div.salida img {
  z-index: 4;
  cursor: pointer;
}
#form-disponibilidad form div.llegada label,
#form-disponibilidad form div.salida label {
  width: 27%;
  margin-right: 1%;
  display: inline-block;
}
#form-disponibilidad form div.llegada span,
#form-disponibilidad form div.salida span {
  display: block;
}
#form-disponibilidad form input[type=submit] {
  background: black;
  color: white;
  padding: 8px 0px;
  border-width: 0;
  width: 100%;
  font-size: 16px;
  text-transform: uppercase;
  text-align:...

JavaScript

$(function(){
    var initDatepickers = function(){
        	var $entrada = $('#form-disponibilidad [name=llegada]');
        	var $salida = $('#form-disponibilidad [name=salida]');
        	$entrada.datepicker({
        		'onSelect': function (str, obj) {
        			var tmpDateObj = $entrada.datepicker('getDate');
        			/* Actualizar selects */
        			$(this).datepicker("hide");
        		},
        		'minDate': 1,
        		showOn: "button",
                buttonImage: "http://next.cabauhotels.com/img/iconos/pixel.png",
        		buttonImageOnly: true,
        		dateFormat: 'yy-mm-dd'
        	});
        	$salida.datepicker({
        		'onSelect': function () {
        			var tmpDateObj = $salida.datepicker('getDate');
        			datepickerToselect(tmpDateObj,'end');
        			$(this).datepicker("hide");
        		},
        		'minDate': 2,
        		showOn: "button",
                buttonImage: "http://next.cabauhotels.com/img/iconos/pixel.png",
        		buttonImageOnly: true,
        		dateFormat: 'yy-mm-dd'
        	});
        	
        }

        initDatepickers();
});