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">
<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>
  
  <a href="#home">
    <div class="fwiName"> falconwood </div>
  </a>
  <div class="headerGreaterThan"> &gt; </div>
  <div class="breadcrumInsert"></div>
  <nav>
    <a href="#careers" class="nostyle">careers</a> |
    <a href="#about" class="nostyle">about</a> |
    <a href="#locations" class="nostyle">locations</a>
  </nav>
</header>
<div class="content" id="content">
<div class="toTop" id="toTop"><a href="#home" class="nostyle"><i class="fa fa-home"></i></a></div>
  <section class="section section1" id="home">
  <div class="showPaused">II</div>
    <div id="who-is-falconwood"></div>
    <div class="section1ContentBlock swoopz fadeIn">
      <div class="wordCloud title" id="word5">falconwood inc</div>
      <div class="wordCloud title"...

CSS

@media {
/* page styling */
::selection {
  background-color: #a53131;
  color: #fff;
}

p {
    margin: 0;
}

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;
}

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

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

#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;
  position: fixed;
}

#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;
  height: 50px;
  transition: background 0.3s;
  background: white;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.sticky>#headerLogo {
  width: 58px;
  height: 46px;
  margin-top: 2px;
  margin-left: 3px;
}

nav {
  color: #a53131;
  float: right;
  line-height: 50px;
  margin-right: 30px;
  transition: 0.3s ease;
}

header.sticky>nav {
    margin-right: 30px;
}

header>nav>a {
  color: #777;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8)
}

header.sticky>nav>a {
    color: #777;
    text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
    cursor: default;
    transition: .2s;
    padding: 14px 0px;
}
header.sticky>nav>a:hover {
   ...

JavaScript

var vid = document.getElementById("myVideo");

function playVid() {
  myVideo.play();
}
$( ".fullscreen-bg" ).delay( 300 ).fadeIn( 2000 );
$( ".videoGrate" ).delay( 2300 ).fadeIn( 1000 );
function pauseVid() {
  myVideo.pause();
}
$('button').on('click', function() {
  $('.first, .second').toggle();
});
vid.onended = function(e) {
  $('.first, .second').toggle();
};
$(document).mouseleave(function () {
    myVideo.pause();
    $( ".first" ).show();
    $( ".second" ).hide();
});

// add section title to navbar + random stickies
$(window).scroll(function() {
  var Scroll = $(window).scrollTop() + 1,
    home = $('#home').offset().top,
    careers = $('#careers').offset().top,
    about = $('#about').offset().top,
    locations = $('#locations').offset().top,
    careerFloater = $('#careerFloater').offset().top,
    careerFloaterHeight = $('#careerFloater').height(),
    titleFloaterHeight = $('.floatTitle').height(),
    section2Height = $('.section2').height();

  if (Scroll >= home) {
    $(".breadcrumInsert").text('');
    $(".headerGreaterThan").removeClass("visible");
    window.location.hash = '#!top';
  }
  if (Scroll >= section2Height) {
    $(".breadcrumInsert").text('who is falconwood?');
    $(".headerGreaterThan").addClass("visible");
    window.location.hash = '#!whoisfalconwood';
  }
  if (Scroll >= careers) {
    $(".breadcrumInsert").text('careers');
    $(".headerGreaterThan").addClass("visible");
    $(".section4Content").addClass("showMe");
    window.location.hash = '#!careers';
    myVideo.pause();
    $( ".first" ).show();
    $( ".second" ).hide();
    $( "#toTop" ).show();
  }
  if ((Scroll >= (careers + 5)) && (Scroll < (about - 150))) {
    $(".floatTitle").addClass("simpleSticky");
  } else {
    $(".floatTitle").removeClass("simpleSticky");
  }
  if (Scroll < (careers + 5)) {
    $("#careerFloater").removeClass("simpleSticky");
    $(".section4Content").removeClass("showMe");
  }
  if ((Scroll >= (careers + 5)) && (Scroll < (about -...