JSFiddle - React, Tailwind, and code Playground
HTML
<div id='wrapper'>
<div id='header'>
<div class='container'>
<h1>Chisinau</h1>
<p>blog situat intre Prut si Nistru</p>
</div>
<div class='container'>
<ul>
<li><a class='active' href="#">Home</a></li>
<li><a href="#">Despre</a></li>
<li><a href="#">Cautare</a></li>
<li><a href="#">En</a></li>
</ul>
</div>
</div>
<div id='content'>
<div class='container'>
<h1>Post</h1>
</div>
</div>
</div>
CSS
body{
background: #000;
}
#wrapper{
width:68%;
margin:0 auto;
/*border:1px solid #000;*/
background: #fff;
margin-top: 55px;
}
.container{
padding: 20px;
/*border:1px solid red;*/
border-bottom: 3px solid #d6e1df;
}
#header{
/*border:5px solid #4b9f52;*/
padding :0 100px 0 100px;
text-align: center;
font: 18px Josefin ;
color: #bbb;
font-weight: 100;
padding-top:0;
}
#header h1{
font-family: Roboto;
font-size: 30px;
text-transform: uppercase;
font-weight: 100;
color: #5d5d5d;
/*border:1px solid #000;*/
}
ul{
margin:0;
padding:0;
}
.container>ul>li{
display:inline-block;
list-style: none;
}
.container>ul>li>a{
display: block;
text-decoration: none;
color: #bbb;
padding: 10px;
}
.container>ul>li>a:hover{
color: #3D9970;
transition: 0.5s ease-out;
}
.active{
color: red;
border: 1px solid red;
}
#content{
padding :0 100px 0 100px;
}