JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head">

		<nav class="menu">
			<ul>
				<li><a href="/index.php">Главная</a></li>
				<li><a href="/gallery.php">Фотогалерея</a></li>
				
			</ul>
		</nav>

		</div>

CSS

#head 
{	position:relative;
	height: 242px;
	width: 100%;
	background: url(/image/head.png) repeat-y 50% #4d8795;
}

.menu 
{	
    position: absolute;
    bottom:0;
    right:0;
    left:0;
	background-color: rgba(0, 0, 0, 0.3);
}

.menu ul
{
	list-style-type:none;
    margin:0;
    padding:0;
    text-align: center;
	background-color: rgba(0, 0, 0, 0.3);	
}

.menu li
{
	display:inline-block;
    line-height:34px;
    padding: 0 10px;
	font-family: Minion Pro, sans-serif;
	font-size: 17px;
	text-transform: uppercase;	
}

.menu li a
{
	color: #fff;
	text-decoration: none;	
}