JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
type="text/javascript"></script>
    <script src="js/javascript.js" type="text/javascript"></script>
                <script>
                
                $(function() {
                    $( "#date-in" ).datepicker();
                });
                </script>
    </head>
    <body>
<div class="booking-mask"><h3>MAKE A<br/>RESERVATION</h3> <span class="arrow-right">></span>
    <div id="booking-form-container">
    <form id="booking-form" action="" method="post">
        <div class="date text-field">
            
                <label for="date-in">CALENDAR</label><input class="has-Datepicker" gtbfieldid="10" id="date-in" name="datein" value="10/07/2011" title="mm/dd/yyyy" placeholder="mm/dd/yyyy" type="text">
                <input id="us-date-in" name="usdatein" value="waiting" type="hidden">

        </div><!--end date text-field-->

        <div class="choose ui-selectmenu ui-selectmenu-dropdown">
            
                <label for="adults-number">GUESTS</label>
                <div class="fake-select ">
                1
                <input type="hidden" name="adults-number" value=""/>

                </div>     
               <ul class="choose-list" id="choose-list-adults">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
        </div><!--end adults-->
        
        <div class="choose ui-selectmenu...

CSS

.booking-mask{
        background: red;
    height: 58px;
    
    margin: 44px 0 0;
    position: fixed;
    right:0;
    top: 0;
    z-index: 3;
    overflow:visible;
    /*padding:0;*/
    color:white;
    
}
.booking-mask h3{
    line-height:12px;
    text-align:center;
    font-size:9px;
    float:left;
    padding:15px 10px 15px 30px;
     
}

.booking-mask .arrow-right{
    display:block;
    float:left;
    padding:18px 0px 0 10px;
    height:20px;
}

#booking-form {
    left: 10px;
    position: absolute;
    top: 10px;
    width: 282px;
    overflow:visible;
}

#booking-form div{
    float:left;
}

#booking-form label{
    font-size:8px;
}

.booking-mask div.date, #booking-mask div.choose {
    margin-right: 0.5em;
}
.booking-mask div.choose{
    width: 46px;
    cursor:pointer;
}

/*
** FORM BOOKING
*/

.booking-mask div.date input {

    background: white;
    cursor: pointer;
    height: 13px;
    padding: 3px;
    vertical-align: top;
    width: 85px;
    margin-right:2px;
}

.booking-mask div.date input:hover {
    background-position: right -19px;
}

#booking-form input,#booking-form select{
    border:none;
    display:block;
        -webkit-border-radius: 4px;
    -moz-border-radius: 4px 4px 4px 4px;
}

.fake-select{
    height:16px;
    width:39px;
    background:white;
    background-position:0 0;
    background-repeat:no-repeat;
    color:black;
    padding:2px 4px;
}

.fake-select:hover{
    background-position:bottom left;
}

.booking-mask .submit {
    background: white;
    border: 0 none;
    cursor: pointer;
    height: 19px;
    margin: 15px 8px 0 0;
    overflow: hidden;
    width: 22px;
}
.booking-mask .submit:hover {
    background-position: 0 -19px;
}


.choose-list{
    background:white;
    width:28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    color:black;
    margin:4px 0 0 3px;
    padding:2px 2px;
    cursor:pointer;
    display:none;
    
}

.choose-list li:hover{
    background:#8B753B;
   ...

JavaScript

$('html').click(function() {
     //Hide the menus if visible
     $('.choose-list').slideUp();
     });
    $('.fake-select').click(function(e){
        e.stopPropagation();
        //show dropdown menu
        $(this).siblings('.choose-list').slideToggle('fast');
        //hide dropdown on focusout
        
        
    });
    
    //make selection
    $('ul.choose-list li').click(function(){
        
        var selection=$(this).text();
        $(this).parent('.choose-list').slideToggle('fast');
        var bo=$(this).parent().siblings('.fake-select').text(selection);
        
        
    });