JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<header>
  <div class="contaiter">
    <img src="http://unsplash.it/100/100/?random" alt="logo" class="logo" />
    <nav>
      <div class="menu">
        <ul 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>
        </ul>
        <ul 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>
        </ul>
      </div>
    </nav>
  </div>
</header>

CSS

body {
  padding: 0;
  margin: 0;
}

header {
  height: 880px;
  padding-top: 40px;
  background: url("http://unsplash.it/1280/800/?random") no-repeat center top / cover;
}

.contaiter {
  display: flex;
  align-items: center;
  width: 1185px;
  margin: 0 auto;
  /* border: 3px solid red; */
}

.logo {
  margin-top: 20px;
  float: left;
}

nav {
  /* margin-top: 40px; */
}

.lmarg,
.bmarg{
  margin: 0;
  padding: 0;
  list-style: none;
}

.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;
}