JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div id="wrapper-header">
	<ul id="menu">
	<a class="menu-a menu-active" href="#"><li class="menu-li">O nas</li></a>
	<a class="menu-a" href="#"><li class="menu-li">Oferta</li></a>
	<a class="menu-a" href="#"><li class="menu-li">Galeria</li></a>
	<a class="menu-a" href="#"><li class="menu-li">Kontakt</li></a>
	</ul>
</div>

<div id="wrapper-main">

</div>

<div id="wrapper-footer">

</div>

</body>

CSS

/* TAGS */
*{
	padding:0;
	margin:0;
}

/* END OF TAGS */

/* WRAPPERS */
#wrapper-header{
	width:100%;
	height:50px;
	background:url("background.png");
}

#wrapper-main{
	width:100%;
	height:calc(100% - (90px));
	background-color:green;
}

#wrapper-footer{
	width:100%;
	height:40px;
	background-color:red;
}
/* END OF WRAPPERS */

/* CONTENT */
#menu{
	width:400px;
	height:100%;
	list-style-type:none;
	float:right;
	margin-right:50px;
	display:flex;
	align-items:center;
}

.menu-a{
	text-decoration:none;
	color:#FAFAFA;
	width:23%;
	height:50%;
	background-color:#3B3B3B;
	float:left;
	margin:auto 0;
	margin-right:2%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family:'codropsicons',verdana;
	font-weight:600;
	font-size:13px;
	text-transform:uppercase;
	border-radius:2px;
	-webkit-font-smoothing: antialiased;
	position:relative;
	transition:0.5s;
}

.menu-a:hover,
.menu-active{
	background-color:#FAA732;
}

.menu-a:last-child{
	margin-right:0;
}

.menu-li{
 text-align:center;
}
/* END OF CONTENT*/

/* MEDIA QUERIES */
@media screen and (max-width: 1440px) {

}

@media screen and (max-width: 980px) {
	
}

@media screen and (max-width: 650px) {

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 320px) {

}
/* END OF MEDIA QUERIES */

/* FONTS */
@font-face{
    font-family:'codropsicons';
    src:url('codropsicons.tff');
}
/* END OF FONTS */