JSFiddle - React, Tailwind, and code Playground

by royriojas

HTML

<!doctype html>
<html>
  <head>
    <!-- jQuery --><script src="https://rawgit.com/royriojas/Astrea/master/lib/jquery/jquery.js"></script>
    <!-- jQuery UI --><script src="https://rawgit.com/royriojas/Astrea/master/lib/jqueryui/jquery-ui.js"></script>
    <link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/lib/jqueryui/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet">
    <link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/astrea/css/reset-base.css" rel="stylesheet">
    <link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/astrea/css/forms.css" rel="stylesheet">
    <!-- validator javascript files -->
    <link type="text/css" href="https://rawgit.com/royriojas/Astrea/master/astrea/validator/validator.css" rel="stylesheet">
    <script src="https://rawgit.com/royriojas/Astrea/master/astrea/validator/validator.js"></script>
    <style type="text/css">
      .message {
        padding: 20px;
        color: white;
        background: green;
        text-align: center;
        display: none;
      }
      
      .note {
        background: #eee;
        padding: 10px;
        margin-top: 10px;
      }
      
      .note p {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      function notNullOrEmpty(val) {
        return val != null && val != "";
      }
      
      function checkUserName(field, val, validator, callback) {
        //simulate an ajax call
        setTimeout(function() {
          var fname = $('#NameField').val();
          var lname = $('#LastField').val();
          //only allow user names that not contains the original first name or last name on them.
          var isValid = notNullOrEmpty(val) && notNullOrEmpty(fname) && notNullOrEmpty(lname) && val.indexOf(fname) < 0 && val.indexOf(lname) < 0;
          callback(isValid);
        }, 200);
      }
      
      $(function() {
        $('.forms').validator();
       ...

CSS

/* Nothing to see here go ahed to the result tab or to the HTML tab */

JavaScript

/* Nothing to see here go ahed to the result tab or to the HTML tab */