JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $(function() {
    var dialog, form,
      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      
      email = $("#email"),
      password = $("#password"),
      allFields = $([]).add(name).add(email).add(password),
      tips = $(".validateTips");

    function updateTips(t) {
      tips
        .text(t)
        .addClass("ui-state-highlight");
      setTimeout(function() {
        tips.removeClass("ui-state-highlight", 1500);
      }, 500);
    }

    function addUser() {
      var valid = true;
      allFields.removeClass("ui-state-error");

      valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
      valid = valid && checkRegexp(email, emailRegex, "eg. ui@jquery.com");
      valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

      if (valid) {
        $("#users tbody").append("<tr>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
          "</tr>");
        dialog.dialog("close");
      }
      return valid;
    }

    dialog = $("#dialog-form").dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
       
      },
      close: function() {
        form[0].reset();
        allFields.removeClass("ui-state-error");
      }
    });

    form = dialog.find("form").on("submit", function(event) {
      event.preventDefault();
      addUser();
    });

    $("#create-user").button().on("click",...

CSS

<style>
  label,
  input {
    display: block;
  }
  
  input.text {
    margin-bottom: 12px;
    width: 95%;
    padding: .4em;
  }
  
  
  
  fieldset {
    padding: 0;
    border: 0;
    margin-top: 25px;
  }
  
  h1 {
    font-size: 1.2em;
    margin: .6em 0;
  }
  
  div#users-contain {
    width: 950px;
    margin: 20px 0;
  }
  
  div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
  }
  
  div#users-contain table td,
  div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
  }
  
  .ui-dialog .ui-state-error {
    padding: .3em;
  }
  
  .validateTips {
    border: 1px solid transparent;
    padding: 0.3em;
  }
  
   dialog = $("#dialog-form").dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
       
      }

</style>