JSFiddle - React, Tailwind, and code Playground

HTML

<body>	
		<div class='container'>
		
			<header class='clearfix'>
				<a href='index.html'><h1>Misia Mariina</h1></a>
				<nav>
					<ul>
						<li><a class='bordermenu' href='#'>O NÁS</a>
							<ul>
								<li><a href='#'>štatút</a>
								<li><a href='#'>spiritualita</a>
								<li><a href='#'>vízia</a>
							</ul>
						</li>
						<li><a  class='bordermenu' href='#'>AKTIVITY</a>
							<ul>
								<li><a href='#'>história</a>

							</ul></li>
						<li><a  class='bordermenu' href='#'>ODKAZY</a>
						<li><a  class='bordermenu' href='#'>KONTAKT</a></li>
					</ul>
				</nav>
			</header>	
</html>

CSS

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */

@font-face {
font-family: Proxima;
src: url(fonts/ProximaNova-Regular.otf);
}


body{
	background-color: #3fa2ff;
	background-size: cover;
	color: white;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.17);
}

.container{
	width: 960px;
	margin: 0 auto;
	text-align: center;
	/* border: 1px solid yellow; */
}

a{
	text-decoration: none;
	color: white;
}	

header h1{
	text-indent: 1000%;
	white-space: nowrap;
	overflow: hidden;
	width: 400px;
	height: 100px;
		margin-top: 70px;
	display: inline-block;
	background: url(img/logo.png) no-repeat;
	float: left;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

header{
		text-align: right;
}

nav{
	font-family: Proxima;
	text-transform: uppercase;
	text-align: right;
	display: inline-table;
	position: relative;
	top: 100px;
}

nav ul li{
	display: block;
	float: left;
	margin: 20px;
}

.bordermenu{
	font-size: 18px;
	margin-bottom: 50px;
	padding-bottom: 5px;
-webkit-transition: .1s all linear;
-moz-transition: .1s all linear;
-o-transition: .1s all linear;
transition: .1s all linear;
}
	

.bordermenu:hover{
	border-bottom: 3px solid rgba(255,255,255,1);
}

.sep{
	margin-top: 40px;
	margin-bottom: 30px;
}

.fl{
	color:...