JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><span class="nameMenu">МЕНЮ</span><i class="fa fa-bars"></i></a>
</div>
CSS
.topnav {
overflow: hidden;
float: right;
position: relative;
z-index: 80;
right: 50px;
top: 42px;
width: 40%;
background: none;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background: gray;
}
.topnav a:hover {
color: black;
}
.active {
background-color: gray;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 2000px) {
.topnav {
display: block;
}
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
background: none;
color:#000;
}
.topnav a.icon:hover{
background: gray;
color:#fff;
}
.topnav span.nameMenu {
/*color: black;*/
font-size: 15px;
margin: 0px 7px 0 0;
}
.responsive span.nameMenu {
display:none;
}
}
@media screen and (max-width: 2000px) {
.topnav.responsive {position: absolute;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.responsive i.fa.fa-bars {
color: white;
}
.fa {
/*color:black;*/
}
}
@media screen and (max-width: 950px) {
.topnav {
position: absolute;
width: 71%;
right: 0;
top: 20px;
}
.topnav.responsive {position: absolute;}
}
@media screen and (max-width: 800px) {
.topnav span.nameMenu {display:none;}
.topnav.responsive a:first-child {
display: block;
}
}
JavaScript
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}