JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<nav class="cf">
	<span class="logo">LOGO</span>
  <ul class="left-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
	<ul class="right-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

CSS

/* Clearfix, http://nicolasgallagher.com/micro-clearfix-hack/ */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/* --- */

html,
body {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  min-width: 960px;
  margin: 0;

  background-color: black;
}
nav .logo {
  float: left;
  font-size: 1.7em;
  color: white;
}
nav li {
  float: left;
  list-style: none;
  margin-left: 1em;
}
nav li a {
  text-decoration: none;
  color: white;
}
nav ul {
  margin: .3em;
  padding: 0;
}
nav .left-menu {
  float: left;
}
nav .right-menu {
  float: right;
  padding-right: 2em;
}
nav .right-menu::after {
  content: '';
  display: table;
  clear: both;
}