JSFiddle - React, Tailwind, and code Playground

by Nikhil Mangal

HTML

<ul id="menu">
	<li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu
{
	margin:50px;
	padding:0px;
	list-style:none;
}
#menu li
{
	float:left;
}
#menu li a
{
	display:block;
	width:100px;
	height:100px;
	background:#090;
	color:#fff;
	line-height:100px;
	text-align:center;
	text-decoration:none;
	margin:0px 10px;
	border:solid 2px #fff;
	box-shadow:0px 0px 10px #999;
	-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
	 -webkit-transition: all .2s ease-out; 
   -moz-transition: all .2s ease-out; 
   -o-transition: all .2s ease-out; 
   transition: all .2s ease-out;
}
#menu li a:hover
{
	 -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
   -ms-transform: scale(1.2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=1.2, M12=-0, M21=0, M22=1.2)
}