JSFiddle - React, Tailwind, and code Playground

by kaktusvit

HTML

<div id="menu">
	<ul>
		<li><a href="#" class="red">home</a></li>
		<li><a href="#" class="orange">about us</a></li>
		<li><a href="#" class="yellow">services</a></li>
		<li><a href="#" class="green">solutions</a></li>
		<li><a href="#" class="blue">contact us</a></li>								
	</ul>
</div>
</body>
</html>

CSS

/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
----------------------------*/
*{
	margin:0;
	padding:0;
}
body{
	background:#fff;
	color:#666;
	font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
	width:100%;
	margin:15px;
}
	#menu ul{
		list-style:none;
	}
		#menu li{
			list-style:none;
			display:block;
			float:left;
			height:37px;
			line-height:37px;
			text-align:center;
			margin:0 1px;
		}
			#menu li a{
			font-weight: bold;
				display:block;
				float:left;
				font-weight:bold;
				color:#fff;
				text-decoration:none;
				padding:5px 35px;
				text-transform:uppercase;
			}
				#menu li a:hover{
				  color:red;
					text-decoration:none;
				}
			#menu li a.red{
				background:#c40d0b url(images/r_f.gif) no-repeat left top;
			}
				#menu li a:hover.red{
					background:#c40d0b none;
				}
			#menu li a.orange{
				background:#f26522 url(images/o_f.gif) no-repeat left top;
			}
				#menu li a:hover.orange{
					background:#f26522 none;
				}
			#menu li a.yellow{
				background:#e4c016 url(images/y_f.gif) no-repeat left top;
			}
				#menu li a:hover.yellow{
					background:#e4c016 none;
				}
			#menu li a.green{
				background:#219e0b url(images/g_f.gif) no-repeat left top;
			}
				#menu li a:hover.green{
					background:#219e0b none;
				}
			#menu li a.blue{
				background:#2c88ce url(images/b_f.gif) no-repeat left top;
			}
				#menu li a:hover.blue{
					background:#2c88ce none;
				}
			#menu li a.grey{
				background:#939393 url(images/gr_fold.gif) no-repeat left top;
			}
				#menu li a:hover.grey{
					background:#939393 none;
				}