JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<link href="https://fonts.googleapis.com/css?family=Assistant|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="above">
  <div class="aboveLinks">
    <a href="#careers" class="nostyle">
      <div class="aboveLink aboveLink1">careers</div>
    </a>
    <div class=" aboveLinkSeparator"></div>
    <a href="#about" class="nostyle">
      <div class="aboveLink aboveLink2">about</div>
    </a>
    <div class=" aboveLinkSeparator"></div>
    <a href="#locations" class="nostyle">
      <div class="aboveLink aboveLink4">locations</div>
    </a>
  </div>
</div>
<div class="clearfix"></div>
<header id="header">
  <div id="headerLogo">
    <svg preserveAspectRatio="xMidYMid" viewBox="0 0 280 217" xmlns="http://www.w3.org/2000/svg">
                <path class="falconSvgStyle" d="m247 49l6-1 25-12-9 12-18 16 26-9-21 26 20-6s-4.658 7.653-13 17-24.405 18.904-36 24-14 6-14 6l-34 38s15.674 0.888 25 1 36 4 36 4 0.458 3.494 0 10-3 12-3 12l-22-6 17 14-15 14-16-14 10 14-14 7s-4.189-7.768-9-14-8.536-14.724-18-19-24.68-6.279-35-4-14.667 5.017-37 2-68.304-21.044-73-23-4.461-7.202 0-12 8-7 8-7h46s-34.094-33.839-36-38-5.234-35.112-8-59-8-41-8-41 5.024 2.953 12 17 11 28 11 28-0.128-11.468 0-19 1-21 1-21 7.098 11.613 10 22 6 25 6 25 2.117-6.826 4-14 2-15 2-15 6.05 10.998 8 19 3 18 3 18 2.344-3.339 4-8 4-11 4-11-0.523 8.301-0.599 16.818c-0.08 8.976 1.535 18.183 1.599 18.182 0 0 8.655 10.831 19 20 11.585 10.269 25 19 25 19l-17 21s9.955-7.934 28-29 38-45 38-45 22.797-9.84 50-26 40-27 40-27l-5 9-24 30zm-230 97c-1.856 3.182 0 9 0 9s-3.726-1.816-7-2-8 1-8 1 5.634-9.932 11-12 11-2 11-2-5.107 2.754-7 6z" /> </svg>
  </div>
  <div class="fwiName"> falconwood </div>
  <div class="headerGreaterThan"> &gt; </div>
  <div class="breadcrumInsert"></div>
  <nav>
    <a href="#careers">careers</a> |
    <a href="#about">about</a> |
    <a href="#locations">locations</a>
  </nav>
</header>
<div...

CSS

::selection {
  background-color: #a53131;
  color: #fff;
}

a {
  color: #a53131;
  text-decoration: none;
  overflow: hidden;
}

a.whiteLink {
  color: white;
  text-decoration: none;
}

a:visited {
  color: #454d51;
}

a.whiteLink:visited {
  color: white;
}

a:hover {
  text-decoration: underline;
}

.showMe {
  visibility: visible !important;
}

.redtext {
  color: #a53131;
  font-weight: bold;
}

.greyBack {
  background: grey !important;
}

.swoopz {
  opacity: 0;
  transition: ease all, opacity 2s;
}

.fadeIn {
  opacity: 1;
  margin-left: 0;
}

.rightHalf,
.leftHalf {
  width: calc(50% - 5px);
  display: inline-block;
  vertical-align: top;
}

.rightHalf {
  position: relative;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.above {
  height: 30px;
  position: absolute;
  z-index: 1;
  right: 0;
  color: white;
  font-size: 18px;
  text-shadow: 0 0 2px black;
}

.aboveLinks {
  float: right;
  margin-right: 20px;
}

.aboveLink {
  display: inline-block;
  line-height: 30px;
  margin-left: 6px;
  padding: 6px;
  padding-bottom: 2px;
}

.aboveLink::after {
  content: '';
  width: 0%;
  height: 2px;
  background: #a53131;
  display: block;
  transition: 0.3s ease;
}

.aboveLink:hover::after {
  width: 100%;
}

.aboveLinkSeparator {
  display: inline-block;
  height: 24px;
  margin-top: 10px;
  width: 1px;
  background: #a53131;
  position: absolute;
}

a.nostyle {
  color: white;
  text-decoration: none;
}

a.nostyle:hover {
  text-decoration: none;
}

.clearfix {
  height: 30px;
}

#header {
  height: 50px;
  width: 100%;
  z-index: 999;
  transition: background 0.5s;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0);
  overflow: hidden;
}

#headerLogo {
  width: 58px;
  height: 46px;
  position: absolute;
  margin-left: -63px;
  transition: 0.4s;
  z-index: 9;
}

.falconSvgStyle {
  fill: #a53131;
  fill-rule: evenodd;
}

#header.sticky {
  position: fixed;
  margin-top: -30px;
  height: 50px;
 ...

JavaScript

// pause movie for 5s + play at half speed
setTimeout(function() {
  document.getElementById("myVideo").play();
  document.getElementById("myVideo").playbackRate = 1;
}, 2700);
document.getElementById('myVideo').pause();