JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="HolyGrail">
  <header class="HolyGrail-header">
    <nav>
      <span class="navbar-toggle" id="js-navbar-toggle">
        |||
      </span>
      <a href="#" class="logo">kinduff</a>
      <ul id="nav-bar">
        <li><a href="#">Blog</a></li>
        <li><a href="#">Pictures</a></li>
        <li><a href="#">Guess Book</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">
      <div class="HolyGrail-vcenter">
        <div class="intro">
          <h3>Hello stranger, I'm</h3>
          <h1>kinduff</h1>
          <p>Web developer from MĂ©xico and the internet.<br />
          I believe software should be programmed with care.<br />
What I don't know, I learn; what I do, I share.</p>
        </div>
      </div>
    </main>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
@import url('https://fonts.googleapis.com/css?family=Raleway');

html {
  height: 100%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  font-family: 'Raleway', sans-serif;
  box-shadow: inset 0 0 0 10px #000;
  background-color: #FFF;
}

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 10px;
}

.HolyGrail-header,
.HolyGrail-footer {
  flex: none;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-vcenter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.intro {
  h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 50pt;
    font-weight: 900;
    padding: 10px 0;
    text-align: center;
  }
  h3 {
    text-align: center;
    font-size: 19pt;
  }
  p {
    text-align: center;
    line-height: 2;
  }
}

header {
  font-weight: 400;
  background: #F2F2F2;
  nav {
    .navbar-toggle {
      position: absolute;
      top: 17px;
      right: 25px;
      cursor: pointer;
      color: #000;
      font-size: 18pt;
      font-weight: 900;
      -ms-transform: rotate(-90deg); /* IE 9 */
      -webkit-transform: rotate(-9deg); /* Safari */
      transform: rotate(-90deg);
    }
    .logo {
      font-family: 'Roboto', sans-serif;
      display: inline-block;
      font-size: 18pt;
      text-decoration: none;
      background: #000;
      color: #FFF;
      font-weight: 900;
      padding: 10px 25px;
    }
    #nav-bar {
      display: none;
      &.active {
        display: block;
      }
      li {
        text-align: center;
        border-top: 1px solid #000;
        a {
          text-decoration: none;
          color: #000;
          padding: 15px 0;
          display: block;
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  header {  
    nav {
      display: flex;
     ...

JavaScript

let mainNav = document.getElementById('nav-bar');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
  mainNav.classList.toggle('active');
});