JSFiddle - React, Tailwind, and code Playground

HTML

<table id = "SignUpTable">
		
			<form name = "NewUser" id = "your-form"> 
				<tr>
				<td id = "ErrorUser"></td>
				<td class = "FieldName">Username:</td> 
				<td class = "TextField"><input type = "text" name = "user"/></td> 
				</tr>
				<tr>
				<td></td>
				<td class = "Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td>
				</tr>
			
				<tr>
				<td id = "ErrorEmail"></td>
				<td class = "FieldName">Email:</td> 
				<td class = "TextField"><Input type = "email" name = "email"/></td>
				<tr>
				<td></td>
				<td  class = "Information"><em>We need this to verify your account.</em></td>
				</tr>
				
				<tr>
				<td id = "ErrorPassword1"></td>
				<td class = "FieldName">Password:</td>
				<td class = "TextField"><input type = "password" name = "pwd"/></td>
				<tr>
				<td></td>
				<td  class = "Information"><em>6-20 characters</em></td>
				</tr>
				
				<tr>
				<td id = "ErrorPassword2"></td>
				<td class = "FieldName">Confirm Password:</td>
				<td class = "TextField"><input type = "password" name = "confirmPwd"/></td>
				<tr>
				<td></td>
				<td  class = "Information"><em>just in case you didn't make mistakes!</em></td>
				</tr>
		
				
				
				<tr>
				<td id = "ErrorFname"></td>
				<td class = "FieldName">First Name:</td>
				<td class = "TextField"><input type = "text" name = "fName"/></td>
				<tr>
				<td></td>
				<td  class = "Information"><em>optional</em></td>
				</tr>
				

				<tr>
				<td id = "ErrorLname"></td>
				<td class = "FieldName">Lastname:</td>
				<td class = "TextField"><input type = "text" name = "lName"/></td>
				<tr>
				<td></td>
				<td  class = "Information"><em>(optional)</em></td>
				</tr>
				
		
				<div id = "submit"><input type = "submit" value = "Submit"/></div>
				
				
				</form>
		</table>

JavaScript

function validateUserName(user)
	{
		var u = document.forms["NewUser"]["user"].value
		var uLength = u.length;
		var illegalChars = /\W/; // allow letters, numbers, and underscores
		if (u == null || u == "")
		{
			return "You Left the Username field Emptyyy";

		}
		else if (uLength <4 || uLength > 11)
		{
			return "The Username must be between 4 and 11 characters";
			
		}
		else if (illegalChars.test(u)) 
		{
			return "The Username contains illegal charectors men!";
		}
		else
		{
			return "";
		}
	}
	
	function validatePassword(pwd)
	{
		var p = document.forms["NewUser"]["pwd"].value
		var cP = document.forms["NewUser"]["confirmPwd"].value
		var pLength = p.length;
		if (p == null || p == "")
		{
			return "You left the password field empty";
		}
		else if (pLength < 6 || pLength > 20)
		{
			return "Your password must be between 6 and 20 characters in length";
		}
		else if (p != cP)
		{
			return "The passwords do not match!"
		}
		else
		{
			return "";
		}
	}
	
	function validateEmail(email)
	{
		var e = document.forms["NewUser"]["email"].value
		var eLength = e.length;
		var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
		var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
    
		if (eLength == "" || eLength == null) 
		{
			
			return "You left the email field blank!";
		} 
		else if (e.match(illegalChars)) 
		{

			return "ILEGAL CHARECTORS DETECTED EXTERMINATE";
		} 
		else 
		{
			return "";
		}
	}
	function validateFirstName(fname)
	{
		var f = document.forms["NewUser"]["fName"].value;
		var fLength = f.length;
		var illegalChars = /\W/;
		
		if(fLength > 20)
		{
			return "First Name has a max of 20 characters";
			
		}
		else if (illegalChars.test(f))
		{
			return "Numbers,letter and underscores in first name only";
			
		}
		else 
		{
			return "";
		}
		
		
	}
	
	function validateLastName(lName)
	{
		var l = document.forms["NewUser"]["lName"].value;
		var lLength = l.length;
		var illegalChars = /\W/;
		
		if(lLength > 100)
		{
			return  "Last...