JSFiddle - React, Tailwind, and code Playground

by horhey

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Flight</a></li>
    <li><a href="#tabs-2">Baggage</a></li>
  </ul>
  <div id="tabs-1">
      <div>
          Airline:
         <select>
              <option value="United">United</option>
              <option value="American">American</option>
              <option value="South Western">South Western</option>
              <option value="US Airways">US Airways</option>
          </select>
      </div>
    <div>  
         <label for="from">From</label>
         <input type="text" id="from" name="from" size="10" />
         <label for="to">to</label>
         <input type="text" id="to" name="to"  size="10" /> 
     </div>
  </div>
  <div id="tabs-2">
    <p>
  <label for="spinner">Number of Bags (1-4):</label>
  <input id="spinner" name="value" />
</p> 
  </div>
  
</div>



<button>Reserve Flight</button>
 <div   id="dialog-message" title="Success">
  <p>
    <span  style="float: left; margin: 0 7px 50px 0;"></span>
    Your flight has been booked.
  </p>
        
 
</div>

CSS

#dialog-message{display:none}

JavaScript

$(function() {
         
    var spinner = $( "#spinner" ).spinner();
    spinner.spinner( "value", 1 );
 
    spinner.spinner({
      spin: function( event, ui ) {
        if ( ui.value > 4 ) {
          $( this ).spinner( "value", 1 );
          return false;
        } else if ( ui.value < 1 ) {
          $( this ).spinner( "value", 4 );
          return false;
        }
      }
    }); 
   $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
   $( "#tabs" ).tabs();
  
     $( "button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
          
           $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
      });
     
  });