JSFiddle - React, Tailwind, and code Playground

by pukie

HTML

<div class="hcontack-float hcontack-menu hcontack-border-left">
			<a href="" class="hcontack-href link-menu">
				<i class="fa fa-bars fa-1x" aria-hidden="true"></i>
			</a>
			</div>
      		<div class="hmenu">
			<nav class="nav-full">
				<ul>
					<li><a class="nav" href="">o firmie</a></li>
					<li><a class="nav" href=""> oferta</a></li>
					<li><a class="nav" href=""> aktualności</a></li>
					<li class="nav-last"><a class="nav" href=""> kontakt</a></li>
				</ul>
			</nav>
		</div>
		<div class="hmenu-mobile">
			<nav class="nav-mobile">
				<ul>
					<li class="nav-title-mobile">MENU</li>
					<li><a class="nav" href="">o firmie</a></li>
					<li><a class="nav" href=""> oferta</a></li>
					<li><a class="nav" href=""> aktualności</a></li>
					<li class="nav-last"><a class="nav" href=""> kontakt</a></li>
				</ul>
			</nav>
		</div>

CSS

.hmenu-mobile{
	display:none;
background:#ffd;
position:fixed;
width:80%;
right:10%;
top:0;
height:100vh;	
z-index:20;
}
.nav-mobile{
	font-size:10vh;
	border:none;
}
.nav-mobile ul {
	width:100%;
}
.nav-mobile ul li{
		padding:20px 0;
		text-align:center;
		border-top:2px solid #fdfc18;
		border-bottom:2px solid #fdfc18;
		list-style:none;
}
.nav-mobile ul li a{
	text-transform:uppercase;
	font-size:10vh;
	text-decoration:none;
	color:#171015;
		magin:auto;

}
.nav-title-mobile{
	background:#171015;
	color:#fdfc18;
}



@media only screen and (min-width: 767px){
 .hmenu-mobile{display:none;}
 .hmenu{
	width:100%;
	margin: 50px 20px 0 20px;
	float:none;
	position:relative;
	overflow:hidden;
	display:block;
}
.nav-full{
	
}
.nav-full ul{
	
}
.nav-last{
	border-right:none !important;
}
.nav-full ul li{
	float:left;
	list-style:none;
	border-right : 1px solid #707070;
}

.nav-full ul li a{
	padding:25px 50px 25px 50px;
	text-decoration:none;
	color:#fff;
	text-transform:uppercase;		
		}
.nav-full ul li a:hover{
	padding:25px 50px 25px 50px;
	text-decoration:none;
	color:#fdfc18;
	text-transform:uppercase;		
		}
}

JavaScript

function menuMobile(){
	$(".link-menu").click(
	function(){
		 $(".hmenu-mobile").slideToggle();
    return false;
	});
}