JSFiddle - React, Tailwind, and code Playground

by bobbyfrancisjoseph

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
    <div id="dialog-form1" title="Create new user">
        <p class="validateTips">All form fields are required.</p>
    
        <form>
        <fieldset>
            <br/>
            <label for="name" class="form-label">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><br/>
            <label for="email" class="form-label">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><br/>
            <label for="password" class="form-label">Password</label>
                <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /><br/>
                <label for="password" class="form-label"></label>
                  <input type="button" id="bnext" value="Next"  />
        </fieldset>
        </form>
    </div>
    <div id="dialog-form2" title="Next user">
        <p class="validateTips">None needed.</p>
    
        <form>
        <fieldset>
            <br/>
            <label for="name" class="form-label">Devil ID</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><br/>
            <label for="email" class="form-label">Voodoo</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><br/>
            <label for="password" class="form-label">Pass Key</label>
                <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /><br/>
                <label for="password" class="form-label"></label>
                  <input type="button" id="bprev" value="Previous"  />
        </fieldset>
        </form>
   ...

CSS

.form-label{
    display: inline-block;
    width: 100px;
}

JavaScript

$(document).ready(function(){
            $( "#dialog-form1, #dialog-form2" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true
            });    
        
            $( "#bobbycars" )
                .button()
                .click(function() {
                    $( "#dialog-form1" ).dialog( "open" );
            });
              
            $( "#bnext" )
                .button()
                .click(function() {
                    $( "#dialog-form2" ).dialog( "open" );
                    $( "#dialog-form1" ).dialog( "destroy" );
                    
            });
              
            $( "#bprev" )
                .button()
                .click(function() {
                    $( "#dialog-form2" ).dialog( "destroy" );
                    
            });
              
        });