JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<!DOCTYPE html>
<html lang = "en-US">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="theme-color" content="#a53131">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <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">
<link rel = "stylesheet" type = "text/css" href = "/css/style1.css" />
<!-- only add when editing -->
<link rel = "stylesheet" type = "text/css" href = "http://falconwood.us/css/style1.css" />
<!-- /only add when editing -->
</head>

<body>

<link href="https://fonts.googleapis.com/css?family=Assistant|Open+Sans" rel="stylesheet">
<header id="header" class="sticky">
  <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...

CSS

/* 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 {
  float: right;
  line-height: 50px;
  margin-right: 30px;
  transition: 0.3s ease;
}

nav > .navSeparator {
    color: transparent;
}

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

header.sticky>nav>.navSeparator {
    color: #a53131;
}

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:...