JSFiddle - React, Tailwind, and code Playground

by josue exhume

HTML

<header>
  <div class="container">
      <div id="logo_container">
    <a href="" id="logo">Logo</a>
      </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

/*General Settings*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #222;
  font-family: 'Josefin Sans', sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  max-width: 960px;
  margin: 0 auto
}

header {
  background: crimson;
  height: 50px;
}
/*Logo*/

#logo {
  color: snow;
  font-weight: 300;
  text-decoration: none;
    display: inline-block;
    padding: 17px;
}
/*Navigation Menu*/

nav {
  margin-right: 5%;
}

nav li a {
  color: snow;
  text-decoration: none;
  text-align:center;
  display: inline-block;
  padding: 16px;
}

nav li {
  display: inline-block;
  float: left;
}

nav ul {
  float: right;
}

nav li {

}

nav li:hover {
 
  background: #777; 
}

#logo_container{
   margin-left: 5%;
    float:left;
    height: 50px;
    width: 70px;
}







}