JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<link href="https://fonts.googleapis.com/css?family=Assistant|Open+Sans" rel="stylesheet">
<div class="above">
  <div class="aboveLinks">
    <div class="aboveLink aboveLink1">asdf</div>
    <div class=" aboveLinkSeparator"></div>
    <div class="aboveLink aboveLink2">asdf</div>
    <div class=" aboveLinkSeparator"></div>
    <div class="aboveLink aboveLink3">asdf</div>
  </div>
</div>
  <div class="clearfix"></div>
<div 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>
<div class="content" id="content">
  <div class="section section1">
    <div class="section1ContentBlock">
      <div class="wordCloud title" id="word5">falconwood inc</div>
      <div class="wordCloud title" id="word4">adaptive</div>
      <div class="wordCloud title" id="word3">
        <div class="inner3">
          <div class="inner3b">persistent</div>
        </div>
      </div>
      <div class="wordCloud title" id="word2">
        <div class="inner2">
          <div class="inner2b">effective</div>
        </div>
      </div>
     ...

CSS

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

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;
  padding: 0px 3px 0px 6px;
}

.aboveLinkSeparator {
  display: inline-block;
  height: 24px;
  margin-top: 2px;
  width: 1px;
  background: #a53131;
  position: absolute;
}
.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);
}

#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;
    transition: background 0.3s;
    background: white;
    box-shadow:         0px 0px 20px 6px rgba(0,0,0,.2);
}

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

.content.stickied {
  margin-top: 50px;
}

.section {
  height: calc(100vh - 50px);
  width: 100%;
  z-index: 1;
}

.section1 {
    height: 100vh;
    margin-top: -80px;
}

.section1ContentBlock {
    height: 200px;
    width: 500px;
    margin-top: calc(50vh - 80px);
    margin-left: calc(50vw - 250px);
    position: absolute;
    z-index: 1;
}

@media only screen and (min-width: 360px) {
  .section1ContentBlock {
    transform: scale(0.75);
  }
}

@media only screen and (min-width: 540px) {
  .section1ContentBlock {
    transform: scale(1);
  }
}

@media only screen and (min-width: 800px) {
  .section1ContentBlock {
    transform: scale(1.5);
  }
}

@media only screen and (min-width: 920px) {
 ...

JavaScript

window.onscroll = function() {
  stickyFunction()
};

var navbar = document.getElementById("header");
var logo = document.getElementById("headerLogo");
var content = document.getElementById("content");
var sticky = navbar.offsetTop;

function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
    content.classList.add("stickied");
  } else {
    navbar.classList.remove("sticky");

    content.classList.remove("stickied");
  }
}

setTimeout(function(){
    document.getElementById("myVideo").play();
    document.getElementById("myVideo").playbackRate = 0.5;
}, 5000);