JSFiddle - React, Tailwind, and code Playground

by lukewarm74

HTML

asdasd
<div id="dialog-form-custom-shift" title="Edit Shift" style="display:none">
  <p class="validateTips">Enter a custom shift.</p>
 
  <form>
  <fieldset>
  	<div id="partOfDaySelector" class="buttonSet">
	  	<input type="radio" id="pod1" name="radio" /><label for="radio1">Double</label>
	  	<input type="radio" id="pod2" name="radio" /><label for="radio2">Day</label>
	  	<input type="radio" id="pod3" name="radio" /><label for="radio3">Night</label>
	  	<input type="radio" id="pod4" name="radio" /><label for="radio4">Off</label>
	  	<input type="radio" id="pod5" name="radio" /><label for="radio5">Time-Off</label>
	</div>
  </fieldset>
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

JavaScript

$(document).ready(function(){
$("#dialog-form-custom-shift").dialog({
      autoOpen: true,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        Done: function() {
        	$( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
    $(".buttonSet").buttonset();
});