JSFiddle - React, Tailwind, and code Playground

by Brandon Earnhardt

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<script src="https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic"></script>
<body>
  <div class="site-header">
    <div class="row">
      <div class="large-4 columns site-title">
        <h1>
          Brandon E.
        </h1>
      </div>
      <div class="large-8 columns site-nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Resume</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

CSS

h1 {
  margin: 0;
  padding: 0;
}

.site-header {
  background: rgba( 0,0,0,0.5 );
  width: 100%;
}

.site-title {
  font-family: 'Roboto Mono';
  font-weight: 100;
}

ul {
  float: right;
  height: 100%;
  list-style-type: none;
}

li {
  background: red;
  float: left;
  height: 100%;
  text-align: center;
  width: 150px;
}