JSFiddle - React, Tailwind, and code Playground

by arjuncc

CSS

ul#menu1{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	/*position:relative;*/
	display:block;
	height:60px;
	font-size:11px;
    /*font-weight:bold;*/
	background:#000000;
	font-family: Arial, helvetica, clean, sans-serif;
	outline:none;
	
}
ul#menu1 li{
	display:block;
	float:left;
	margin:auto;
	height:59px;
	background:transparent url(../images/repeatTopDivide.png) no-repeat top right;
	padding-left: 0px;
	border-left:solid 1px #000000;
	border-right:solid 1px #000000;
	border-top:solid 1px #000000;
	}
	
	ul#menu1 li ul li{
	border-left:solid 1px #ffffff;
	border-right:solid 1px #ffffff;
	border-top:none;
	}
	
	ul#menu1 li:hover{
	border-left:solid 1px #ffffff;
	border-right:solid 1px #ffffff;
	border-top:solid 1px #ffffff;
	}
	
	ul#menu1 li#startTabHead:hover{
	border-left:solid 1px #000000;
	border-right:solid 1px #000000;
	border-top:solid 1px #000000;
	}
	.parantStyleSelectedfixLi a{
	background: #007e50;
	}
	
	
	
	ul#menu1 li ul li:hover{
	border-top:none;
	}

ul#menu1 li a{
	display:block;
	float:left;
	color: #ffffff;
	text-decoration:none;
    /*font-weight:bold;*/
	padding:23px 20px 0 20px;
	height:39px;
	
	}
	
ul#menu1 li a:hover{
	background: #007e50;
	color: #ffffff;
	/*border-right:solid 1px #ffffff;
	border-left:solid 1px #ffffff;*/
	}
	ul#menu1 li a:focus{
	background: #007e50;
	color: #ffffff;
	}
	ul#menu1 li a:active{
	background: #007e50;
	
	color: #ffffff;
	}
	
	
	ul#menu1  li.startTabHead a:hover{
	background: #007e50;
	color: #ffffff;
	font-weight:bold;
	border-right:none;
	border-left:none;
	}
		
	ul#menu1 li ul li a:hover{
	background: #007e50;
	color: #ffffff;
	/*font-weight:bold;*/
	border-right:none;
	border-left:none;
	}
	
	
#menu1 ul {
position:absolute;
display:none;
width:0em;
}
ul#menu1 ul  li{
	display:block;
	float:left;
	left:0;
	margin:auto;
	top:0em;
	background: #007e50;
	height:auto;
	border-left:none;
	border-right:none;
	border-top:none;
	}
	
	ul#menu1 ul{
	left:left-1;
	}

ul#menu1 ul li...