JSFiddle - React, Tailwind, and code Playground

by akshaybeekhandelwal

HTML

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script>
$(function() {
 $( "#datepicker" ).datepicker();
});
</script>


<form id="test" action="#" method="get">
<fieldset>
    <!--<legend>Form</legend>-->
    <div class="form-row">
        <div class="field-label">
          <label for="name-t2">*Your Name:</label>
          </div>
        <div class="field-widget"><input name="name-t2" id="name-t2" class="required" title="Enter your name" /></div>
    </div>
    <div class="form-row">
        <div class="field-label"><label for="email-t2">*Your Email:</label></div>
        <div class="field-widget"><input name="email-t2" id="email-t2" class="required validate-email" title="Enter a correct email. E.g. [email protected]" /></div>
    </div>
    <div class="form-row">
        <div class="field-label"><label for="contact-t2">Contact Number:</label></div>
        <div class="field-widget"><input name="contact-t2" id="contact-t2" class="validate-digits" title="Enter your contact number" /></div>
    </div>
    <div class="form-row">
        <div class="field-label"><label for="datepicker">Departure Date:</label></div>
        <div class="field-label">
            <input id="datepicker" name="datepicker" class="required validate-date-au" type="text" />
        </div>
    </div>
    <div class="form-row">
        <div class="field-label"><label for="ppl-t2">Number of People:</label></div>
        <div class="field-label"><input name="ppl-t2" id="ppl-t2" class="validate-number" title="Optional: Enter number of people" /></div>
    </div>
   ...

CSS

/*
 * jQuery UI CSS Framework 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...