JSFiddle - React, Tailwind, and code Playground

by jkozla01

HTML

<!DOCTYPE html>
<html lang="en-ca" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="mystyle3.css">
        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		
		
		
		<script src="//code.jquery.com/jquery-1.10.1.js"></script>
        <script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
		<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
		<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
         
	
<script>


$(function() {
       
   $( "#inputform" ).validate({rules: {
                   fname: {
                           required: true,
                           minlength: 2,
                           maxlength: 20,
                           alphanumeric: true,
                           
                           
    },
                   lname: {
                           required: true,
                           minlength: 2,
                           maxlength: 20,
                           alphanumeric: true,
    },
                   street: { 
                           required: true,
          ...

CSS

body {
    font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 1px 1px 1px;
    color: black;
    font-size: 13px;
    text-align: center;
    background-color: AliceBlue;
}
h1 {
    text-align: center;
    color:black;
}
p {
    color: black;
    text-align: center;
    font-size: 12px;
    font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#cssmenu {
    width: auto;
}
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
    padding: 0;
    margin: 0;
    line-height: 1;
    font-family:'Source Sans Pro', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
    content:"";
    display: table;
}
#cssmenu:after, #cssmenu > ul:after {
    clear: both;
}
#cssmenu a {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#cssmenu ul {
    background: #3b5998;
    border-radius: 3px;
    border: 1px solid #2b4479;
    border: 1px solid #2d4373;
    -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
#cssmenu ul > li {
    float: left;
    list-style: none;
}
#cssmenu ul > li > a {
    display: block;
    text-decoration: none;
    padding: 15px 44px;
    position: relative;
}
#cssmenu ul > li > a:hover {
    background: #2d4373;
    -webkit-box-shadow: inset 0 0 1px #1e2e4f;
    -o-box-shadow: inset 0 0 1px #1e2e4f;
   ...