JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gora">
  <div id="tlo"> 
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="rzym.html">Rzym</a></li>
        <li><a href="madryt.html">Madryt</a></li>
        <li><a href="paryz.html">ParyĹĽ</a></li>
        <li><a href="berlin.html">Berlin</a></li>
      </ul>
    </nav>
  </div>
</div>

CSS

@font-face {
	font-family: 'MyriadPro';
	src: url("../fonts/MyriadPro-Bold.otf") format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadPro1';
	src: url("../fonts/MyriadPro-Regular.otf") format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadPro2';
	src: url("../fonts/Myriad-Pro-Italic.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
.clear {
	clear: both;
}
#gora{
	width:1000px;
	height:492px;
	margin:0 auto;
}
#tlo{
	background:url(../img/gora.jpg);
	width:1000px;
	height:492px;
	position:relative;
	margin-top:-16px;
}
#tlo nav{
	margin-left:300px;
	}
#tlo nav li{
	list-style:none;
	float:left;
	position:relative;
}
#tlo nav li a{
	text-decoration:none;
	color:#000;
	font-family:"MyriadPro";
	font-size:22px;
	position:relative;
  display: block;
  padding: 20px;
}
#tlo nav li:hover {
	background:#2ab8bc;
}