JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/syles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="contaiter">
<img src="img/logo.png" alt="logo" class="logo" />
<nav>
<ul class="menu">
<div class="lmarg">
<li><a href="#"><img src="img/ico/insta.png" /></a></li>
<li><a href="#"><img src="img/ico/skype.png" /></a></li>
<li><a href="#"><img src="img/ico/twitter.png" /></a></li>
<li><a href="#" id="ico1"><img src="img/ico/ico-face.png" /></a></li>
</div>
<div class="bmarg">
<li><a href="#">Contact us</a></li>
<li><a href="#">Tutoreals</a></li>
<li><a href="#">Extensions</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Home</a></li>
</div>
</ul>
</nav>
</div>
</header>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<section>
<div class="contaiter">
</div>
</section>
<footer>
<div class="contaiter">
</div>
</footer>
<div class="contaiter">
</div>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
}
header {
background: url(../img/bg-header.jpg) no-repeat center top / cover;
height: 880px;
}
.contaiter {
width: 1185px;
margin: 0 auto;
border: 3px solid red;
}
.logo {
margin-top: 20px;
float: left;
}
nav {
margin-top: 40px;
}
.bmarg a {
text-decoration: none;
color: #fff;
font-size: 20px;
margin-right: 57px;
}
.lmarg a {
margin-right: 34px;
}
.menu li {
display: block;
float: right;
}
#ico1 {
padding-left: 40px;
}
.menu li a:hover {
color: black;
}