JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
	<div class="right-header">
		<ul class="nav">
            <li><a href="#">Наш адрес</a>
            <li><a href="#">Фото Зала</a>
            <li><a href="#">Контакты</a>
</ul>
	</div>
	<div class="center-header"></div>
	<div class="left-header">
       <a href="#">Меню</a>
	</div>
	<div class="header-menu">
		
	</div>
</div>
<body>
	<div class="container">
		

	</div>

CSS

*{
	margin: 10px auto !important;
	padding: 0;
}
body{
    background: #d3d4d6;
	font-family: Geneva, Arial, Helvetica, "Tahoma" sans-serif;
}
.header{
    width: 885px;
    margin: 0 auto;
}
.right-header{
    width: 822px;
    height: 53px;
    background: #1e2225;
    float: right;
}
.nav{
	visibility: hidden;
}
.nav, .nav li, .nav li{
    margin: 0;
    padding: 0;
}
.nav li {
  display: inline-block;
  padding: 1px 8px 0px 15px;
}
.nav a{
	text-decoration: none;
	color: #d09c10;
}
.nav a:hover{
    color: #f9cc54;
}
.center-header{
	background: #2ff750;
	float: right;
	width: 3px;
	height: 53px;
}
.left-header{
	background: #e66047;
	width: 60px;
	height: 53px;
    float: left;
    text-align: center;
    line-height: 5px;
}
.left-header a{
	display: block;
	text-decoration: none;
	color: #ffffff;
	padding: 16px 5px;

}
.container{
    width: 1200px;
    height: 100%;
}

JavaScript

$(document).ready(function() {
	$("div > a").click(function(){
       $('.nav').css({
    'visibility': 'visible'});
});