JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<main>
  <section class="welcome">

  </section>
  <section class="foreword">

  </section>
  <section class="historic">

  </section>
  <section class="contact">

  </section>
</main>

SCSS

$motogp-black: #171717;
$motogp-pink: #d80d45;

SECTION {
  position: relative;
  background: {
    repeat: no-repeat;
    position: center center;
    size: cover;
    attachment: fixed;
  }
  
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.welcome {
  background: {
    image: url("http://dev.joshmoto.wtf/assets/img/background-holeshot.jpg");
  }
  &:before {
    background: black;
    opacity: .8;
  }
}

.foreword {
  background: {
    image: url("http://dev.joshmoto.wtf/assets/img/background-book.jpg");
  }
  &:before {
    background: $motogp-pink;
    opacity: .9;
  }
}

.historic {
  background: {
    image: url("http://dev.joshmoto.wtf/assets/img/background-book.jpg");
  }
  &:before {
    background: black;
    opacity: .8;
  }
}

.contact {
  background: {
    image: url("http://dev.joshmoto.wtf/assets/img/background-book.jpg");
  }
  &:before {
    background: white;
    opacity: .8;
  }
}

JavaScript

sectionHeight = function() {

  $('SECTION').css('height', $(window).height());


}

sectionHeight();

$(window).resize(function() {

  sectionHeight();

});