JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<link rel="stylesheet" href="http://falconwood.us/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Assistant|Open+Sans" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "http://falconwood.us/css/style.css" />

<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 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"></path> </svg>
  </div>
  
  <a href="http://falconwood.us" class="nameHome">
    <div class="fwiName"> falconwood </div>
  </a>
  <div class="headerGreaterThan visible"> &gt; </div>
  <div class="breadcrumInsert">services</div>
<nav>
    <a href="http://falconwood.us/#careers" class="nostyle">careers</a><span class="navSeparator">|</span>
    <a href="http://falconwood.us/#about" class="nostyle">about</a><span class="navSeparator">|</span>
    <a href="http://falconwood.us/#locations" class="nostyle">locations</a><span class="navSeparator">|</span>
    <a href="http://falconwood.us/services" class="nostyle" target="_blank">services</a>
  </nav>
</header>

<div class="serviceContent">
<div...

CSS

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}
.underconstruction {
    position: fixed;
    font-size: 8vw;
    color: #00000012;
    margin-top: 47vh;
    margin-left: 12vw;
    font-weight: bold;
    font-family: serif;
    font-family: impact;
    transform: rotate(17deg);
    pointer-events: none;
}
.serviceContent {
      overflow-x: hidden;
  max-width: 1000px;
}
@media only screen and (min-width: 1000px) {
  .serviceContent {
      margin-left: calc(50% - 500px);
}
}
.leftSection, .rightSection {
  width: calc(50% - 45px);
  display:inline-block;
  padding: 20px;
  vertical-align: top;
}
.centerSection {
  width: 60%;
  margin-left: 20%;
  text-align: center;
}
.services, .corporateOverview {
  margin-top: 68px;
  color: #555;
}
.services p {
  margin-block-start: 0;
}
.serviceTitle {
    line-height: 27px;
    padding: 10px 0 5px 0;
    font-size: 18px;
    color: #222;
    text-align: center;
}
.serviceTitle::after {
    content: '';
    display: block;
    background: #a53131;
    height: 1px;
    margin-top: -13px;
    margin-bottom: 13px;
    width: 100%;
}
.whiteBack {
  background: white;
  padding: 0 10px;
}
.centerSection > p {
    text-align: left;
}
.corporateOverview > .sectionTitle::after {
    content: '';
    display: block;
    background: #a53131;
    height: 3px;
    margin-top: -20px;
    margin-bottom: 12px;
    width: 100%;
}
.corporateOverview {
  padding-bottom: 80px;
}
.birdEnd {
    width: 50px;
    right: 50%;
    position: absolute;
    padding-top: 20px;
}

/*----------------------*/

/* 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;
 ...