JSFiddle - React, Tailwind, and code Playground

by Poftorek

HTML

<ul id="menu">
				<li><a href="memberlist.php">Użytkownicy</a></li>
				<li><a href="konkursy">Konkursy</a></li>
				<li><a href="ranking">Ranking</a></li>
			</ul>

CSS

/* Menu forum */
ul#menu {
	float:left;
	height:100px;
	margin:0 20px;
}

ul#menu > li {
	display: inline-block;
}

ul#menu > li  a {
	color: #000;
  background: gray;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    height: 100px;
    line-height: 100px;
    float: left;
    padding: 0 32px;
	display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
	text-decoration:none;
}

ul#menu > li a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0;
    background: #f5d312;
    height: 3px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

ul#menu > li a:hover {
    text-decoration:none;
}

ul#menu > li  a:hover:before, ul#menu > li  a:focus:before, ul#menu > li  a:active:before {
    left: 0;
    right: 0;
}


ul#user_panel_menu {
	float:right;
	height:100px;
}

ul#user_panel_menu > li {
	display: table-cell;
}


ul#user_panel_menu > li a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0;
    background: #0072ff;
    height: 3px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

ul#user_panel_menu > li a:hover:before, ul#user_panel_menu > li a:focus:before, ul#user_panel_menu > li a:active:before {
    left: 0;
    right: 0;
}

ul#user_panel_menu > li  a {
	border-left:1px solid #131313;
	border-bottom: 1px solid #131313;
	padding:0...