JSFiddle - React, Tailwind, and code Playground

HTML

<script src="F:\web design\fishnorhwest\palmeroni\images"></script>
   <form action="#" name="basicform"  id="basicform"  onsubmit="return validate_form()" method="post" > 
                       
                                        <fieldset> 
                                            <label for="username">Name:</label> 
                                            <input type="text"id="username" onkeyup="checkUsernameForLength(this);" /> 
                                          <span class="hint" id="usernamehint">This Field Must Not Be Left Blank !</span> 
                                        </fieldset> 
                                         
                                         <fieldset> 
                                            <label for="country">Country:</label> 
                                            <input
                                                type="text"
                                                id="country"
                                                onkeyup="checkaddress(this);" /> 
                                            <span class="hint" id="countryhint">This Field Must Not Be Left Blank !</span> 
                                        </fieldset> 
                     
                     
                     <fieldset> 
                        <label for="Subject">Subject:</label> 
                        <input
                            type="text"
                            id="country"
                            onkeyup="checkaddress(this);" /> 
                        <span class="hint">Please Indicate What Your Interest Is !</span> 
                    </fieldset> 
                     
                     
                     
                     <fieldset> 
                        <label for="Phone">Phone:</label> 
                        <input
                            type="text"
                            id="Phone"
                            onkeyup="checkphone(this);"...

CSS

/*

PAMLERONI Styleheet
Copyright - all rights reserved,PALMERONI>corp 

*/


/* css reset rule to fix problems with ie explorer*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
    text-align: center;
    /*background: url(images/bg.jpg) no-repeat top center;*/
    /*background:url(images/bgblue1.jpg) repeat;*/
    /*background:url(images/biggreen1.png);*/
    background-color:#3CF9E0;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}


:focus {
    outline: 0;
}


ins {
    text-decoration: none;
}



table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* General style */

#wrapper {
    margin: 0 auto;
    width: 960px;
    background: #F4f4f4;
    margin-top: 30px;
}

#header {
    /*background: url(images/header.png) no-repeat;*/
    /*background:url(images/NEWHEAD1.jpg) no-repeat;*/
    background:url(images/NEWHEAD2.jpg) no-repeat;
    
    width: 960px;
    height: 194px;
    margin: 0 0 0 0;
}

#body {
    background:  #F4F4F4 url(images/ycontent_top%20-%20Copy.jpg) no-repeat top right;
    overflow: hidden;
    text-align: left;
}

#bodylake
{
    
    background:  #F4F4F4 url(images/lakestop.jpg) no-repeat top right;
    overflow: hidden;
    text-align: left;
}


#bodytest
{
    
    background:  #F4F4F4 url(images/testtop.jpg) no-repeat top right;
    overflow: hidden;
    text-align: left;
}
#bodycontact
{
    
    background:  #F4F4F4 url(images/contop.jpg) no-repeat top right;
    overflow: hidden;
    text-align: left;
}
#bodyres
{
    
   ...

JavaScript

function validate_form(form)
{
    var complete=false;

//    Ensure that only one error message is diaplayed at a time
    if(complete)
    {
        clear_all();
        complete = checkUsernameForLength(form.username.value);
        
    }
    if(complete)
    {
        clear_all();
        complete = checkaddress(form.address.value);
    }
    if(complete)
    {
        clear_all();
        complete = checkaddress(form.address.value);
    }
    
    if (complete)
    {
        clear_all();
        complete = checkphone(form.phone.value);
    }
    if (complete)
    {
        clear_all();
        complete = checkEmail(email.phone.value);
    }
        
}

//Clear all red areas
function clear_all()
{
    
    document.getElementById('usernamehint').style.visibility= 'hidden';
    document.basicform.username.style.backgroundColor='white';
       document.getElementById("countryhint").style.visibility= 'hidden';
    document.basicform.country.style.backgroundColor='white';
       document.getElementById("").style.visibility= 'hidden';
    document.basicformm.address.style.backgroundColor='white';
       document.getElementById("").style.visibility= 'hidden';
    document.basicform.phone.style.backgroundColor='white';
       document.getElementById("").style.visibility= 'hidden';
    document.basicform.email.style.backgroundColor='white';
       
}

// This function checks if the username field
// is at least 6 characters long.
// If so, it attaches class="welldone" to the 
// containing fieldset.
 function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
        return true;
    } else {
        fieldset.className = "";
        return false;
    }
}
 
 

 
// This function checks the email address to be sure
// it follows a certain pattern:
// If so, it assigns class="welldone" to the containing
// fieldset.
 
function...