JSFiddle - React, Tailwind, and code Playground

by Rudy Jahchan

HTML

<div class="workspace">
    <nav id="main-nav" class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand"><a href="/">Rudy Jahchan&nbsp;<span>&nbsp;</span></a></div>
        </div>
        <div class="collapse navbar-collapse" id="main-navbar">
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to 'About', '/about/' %></li>
            <li><%= link_to 'Blog', '/blog/' %></li>
            <li><%= link_to 'Contact', '/contact/' %></li>
          </ul>
        </div>
      </div>
    </nav>
    <div id="faux-terminal">
      <div class="layer"></div>
      <div class="overlay"></div>
    </div>
</div>

SCSS

.workspace {
    width: 100%;
    height: 100%;
  background: #fff;
}

$rudy-primary-color: #212121;
$rudy-primary-color-light: #9E9E9E;
$rudy-primary-color-dark: #616161;

$rudy-accent-color: #00C853;
$rudy-accent-color-fallback-1: #00E676;
$rudy-accent-color-fallback-2: #69F0AE;

.navbar {
  font-family: monospace;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.navbar-brand {
  a {
    color: $rudy-accent-color;
    position: relative;

    &:hover {
      color: $rudy-accent-color;
      text-decoration: none;
    }

    span {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 0;
      background: $rudy-primary-color;
      border-left: .5em solid;

      box-sizing: border-box;
      -webkit-animation: typing 3s steps(13, end) infinite alternate,
        blink-caret 1s step-end infinite;
      animation: typing 3s steps(13, end) infinite alternate,
        blink-caret 1s step-end infinite;
    }
  }
}

#faux-terminal {
  @mixin terminal-navbar-size {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 51px;
    min-height: 51px;
  }

  @mixin terminal-navbar-absolute {
    content: '';
    position: absolute;
    @include terminal-navbar-size;
  }

  @mixin terminal-navbar-fixed {
    position: fixed;
    @include terminal-navbar-size;
  }

  @include terminal-navbar-fixed;
  z-index: 4000;
  pointer-events: none;

  &:before {
    @include terminal-navbar-absolute;
    z-index: 4010;
    background: -webkit-linear-gradient(#444 50%, #000 50%);
    background: linear-gradient(#444 50%, #000 50%);
    background-size: 100% 4px;
    background-repeat: repeat-y;
    opacity: .14;
    box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
    -webkit-animation: pulse 5s linear infinite;
    animation: pulse 5s linear infinite;
  }

  &:after {
    @include terminal-navbar-absolute;
    z-index : 4011;
    background-color : $rudy-accent-color;
    background:...