JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<form method="get" action="" id="mainForm">
   <fieldset>
      <legend>Photo Details</legend>
      <table>
         <tr>
            <td colspan="2">
               <p>
               <label>Title</label><br/>
                   <input type="text" id ="titlefield" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" placeholder="Title"  autofocus required/>
                   <input type="text" name="title" size="80" required/>
               </p>
               <p>
               <label>Description</label><br/>
               <textarea name="description" rows="5" cols="61" class="required">
               </textarea>
               </p>            
            </td>
         </tr>
         <tr>
            <td> 
               <p> 
               <label>Continent</label><br/>
               <select name="continent">
                  <option>Choose continent</option> 
                  <option>Africa</option>
                  <option>Asia</option>
                  <option>Europe</option>
                  <option>North America</option>
                  <option>South America</option>
               </select>
               </p>
               <p> 
               <label>Country</label><br/>
               <select name="country">
                  <option>Choose country</option> 
                  <option>Canada</option>
                  <option>Mexico</option>
                  <option>United States</option>
               </select>
               </p>
               <p>	
               <label>City</label><br/>               
               <input type="text" name="city" list="cities"  size="40"/>
               <datalist id="cities">
                  <option>Calgary</option>                
                  <option>Montreal</option>
                  <option>Toronto</option>                  
                  <option>Vancouver</option>
               </datalist>
               </p>
            </td>
            <td>
               <div class="box">
                ...

CSS

/* general text formatting */

h1, h2, h3, nav, footer {
 font-family: Georgia, Cambria, "Times New Roman", serif;
}
body {
   font-family: "Lucida Sans", Verdana, Arial, sans-serif;
   font-size: 85%;
}

table {
   border: collapse; 
   border-spacing: 0;   
   width: 90%;
   margin: 0 auto;
}
table tbody td{
   /* border: 1pt solid #95BEF0;   */
   line-height: 1.5em;
   vertical-align: top;
   padding: 0.5em 0.75em;
}

legend {
   background-color: #EBF4FB ;
   margin: 0 auto;
   width: 90%;
   padding: 0.25em;
   text-align: center;
   font-weight: bold;
   font-size: 100%;
}
fieldset {
   margin: 1em auto;
   background-color: #FAFCFF;
   width: 60%;
}
form p {
   margin-top: 0.5em;
}

.box {
   border: 1pt solid #95BEF0;
   padding: 0.5em;
   margin-bottom: 0.4em;
}

.rectangle {
   background-color: #EBF4FB;
   padding: 0.5em;
}
.centered {
   text-align: center;
}

.rounded, .rounded:hover {
   border: 1px solid #172d6e;
   border-bottom: 1px solid #0e1d45;
   border-radius: 5px;
   text-align: center;
   color: white;
   background-color: #8c9cbf;
   padding: 0.5em 0 0.5em 0;
   margin: 0.3em;
   width: 7em;
   -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
   box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3; 
}
.rounded:hover {
   background-color: #7f8dad;
}

:required { 
 background:red
}
input:required:focus { 
 background:yellow
}
input:required:hover { 
  box-shadow: -16px 0 0 3px #333;
}
.rectangle input:required { 
    box-shadow: 0 0 0 10px red;
}
input[type="text"]:valid,
input[type="name"]:valid, 
input[type="password"]:valid, 
input[type="email"]:valid { 
  background: green
} 

input:invalid { 

} 

input:invalid:focus { 

}

JavaScript

function highlight(event)
{
    event.preventDefault();
    alert('What s uuuuuuppp Mattt!!!');
    return false;

}

var highlightForm = document.querySelector("form#mainForm");
highlightForm.addEventListener('submit',highlight , false);

/**
function addListeners(){
         if (titlefield = ""){
           
           }
         }
         function submitbutton(){
             
         }
      
      window.onload = addListeners; 
 **/