JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

		
        <div class="nav">
         <ul> 
            <li><a href="index.php">Home  </a></li>
            
            <li><a><i>For Reviewers  </i></a>
                <ul>
                <li><a href="reviewerregister.php">Reviewer Registration</a></li>
                <li><a href="submission.php">Paper Submission</a></li>
                </ul>
            <li><a href="dates.php">Important Dates  </a></li>
            <li><a><i>Information  </i></a>
                <ul>
                <li><a href="about.php">About the conference</a></li>
                <li><a href="fee.php">Conference Fee</a></li>
                <li><a href="hotelinfo.php">Hotel Information</a></li>
                <li><a href="registrationforconference.php">Conference Registration</a></li>
                <li><a href="program.php">Conference Program</a></li>
                <li><a href="guidelines.php">Guidelines</a></li>
                <li><a href="keynote.php">Keynote Speakers</a></li>   
                <li><a href="call.php">Call for Paper</a></li>
                <li><a href="major.php">Major Areas</a></li>
                </ul>
            </li>
            <li><a href="comments.php">Comments  </a></li>

         </ul>
		 </div>

CSS

table, th, td
{
    border:1px solid #99d9f4;
	color: white;
}
td
{
    padding: 10px;
}


/* no break in menu for login */

#orange
{
	color:orange;
}

th
{
 /*   background-color:#99d9f4; nothing happens
    color:white;*/
    }
/*conference program isn't getting highlighted, what do'*/


.enlarge:hover 
{
	
	transform:scale(2,2);
	transform-origin:0 0;
}
            
#dates li
{
 margin: 10px 0;   
}

h1
{
/*     text-decoration: underline;
 */	text-transform: capitalize;
	text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
	color: white;

	
}

p, h2, h3, h4, h5, h6
{
color:white;	
}

* {
 font-family: Georgia, serif, Arial;
}
/* this addresses all text
 */
 
 input[type="submit"] 
 {
	 background:green;
	 color: white;
	 height: 1.01 em;
	width: 1.01 em;
	font-size: 110%;
 }
 
 input[type="file"]
 {
	 color:white;
	 height: 1.01 em;
	width: 1.01 em;
	font-size: 110%;
	 
 }
 
  input[type="reset"] 
 {
	 background:red;
	 color:white;
	 height: 1.01 em;
	width: 1.01 em;
	font-size: 110%;
 }
 

body
{
		background-image: url('background.jpg');
		background-repeat: no-repeat;
		background-position: center;
		}
/* backgrounds
blue:
http://micah.illmakeit.com/wp-content/uploads/2010/12/blue-something.jpg

earth:http://booxpic.com/wp-content/uploads/2015/10/high-resolution-blue-earth-hd-wallpaper.jpg

 */


input
{
	color: black;
}

textarea
{
	color: black;
}
/* note that changing the font to white will make the text on the buttons too light to see */
/* reset */



.nav ul {
  list-style: block;
  background-color: black;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 110%;
}
  .nav > ul > li {
    text-align: center;
	

  }
  



.nav li {
  text-align:center;
  
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
  
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/*submenus */
.nav li li {
 ...