JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="container-fluid nav">
  <div class="container cf">
    <div class="brand">
      <a href="#splash">Mr. Roboto</a>
    </div>
    <i class="fa fa-bars nav-toggle"></i>
    <ul>
      <li><a href="#about">About Me</a></li>
      <li><a href="#skills">Skills &amp; Experience</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid splash" id="splash">
  <div class="container">
    <img src="https://s10.postimg.org/jvo3z5kux/QTr_B8o_S.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
    <h1>Mr. Roboto</h1>
    <span class="lead">Android Life Form</span>
    <span class="continue"><a href="#about"><i class="fa fa-angle-down"></i></a></span>
  </div>
</div>

<div class="container-fluid intro" id="about">
  <div class="container">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias ratione impedit soluta amet quas saepe temporibus <a href="#">eum reprehenderit</a> voluptas! A nihil adipisci itaque quos quo dolorum consequuntur iusto facere quaerat, excepturi quod, necessitatibus aliquid quae est qui, aut in assumenda animi tempora debitis. Beatae, veritatis, delectus. Repellat dolore, molestias nam.</p>
  </div>
</div>

<div class="container-fluid features" id="skills">
  <div class="container cf">
    <h2>Skills &amp; Experience</h2>
    <div class="col-3">
      <img src="https://s22.postimg.org/oi5es3fkx/icon_cloud.png" alt="">
      <h3>Cloud Computing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
    <div class="col-3">
      <img src="https://s22.postimg.org/jxj8d5vvl/icon_coding.png" alt="">
      <h3>Expert Coding</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
 ...

CSS

/* https://coolors.co/2c3e50-e74c3c-ffffff-3498db-95a3b3 */

/* ========================
Utilities
======================== */

* {
  box-sizing: border-box;
}

.cf::before,
.cf::after {
    content: "";
    display: table; 
}

.cf::after {
    clear: both;
}

html {
  position: relative;
}

img {
  max-width: 100%;
}

/* ========================
Global
======================== */

body {
  color: #444;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, ul, ol, p {
  margin-top: 0;
}

h1 {
  font-weight: 900;
  
}

p {
  line-height: 1.5;
}

a, a:hover, a:focus, a:active, a:visited {
  color: #E74C3C;
  text-decoration: underline;
}

/* ========================
Containers
======================== */

.container-fluid {
  padding: 0 1em;
}

.container {
  margin: 0 auto;
  max-width: 996px;
}

/* ========================
Navigation
======================== */

@keyframes show-header {
    0% {
        top: -4em;
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}

nav {
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0,0,0,.45);
  position: relative;
  top: 0;
}

nav a, nav a:hover, nav a:focus,  nav a:active, nav a:visited {
  text-decoration: none;
}

nav .brand {
  display: inline-block;
  float: left;
  font-size: 1.25em;
  font-weight: 900;
}

nav .brand a {
  color: #444;
  display: block;
  padding: 1em 0;
}

nav .nav-toggle {
  color: #444;
  cursor: pointer;
  display: inline-block;
  float: right;
  font-size: 1.25em;
  padding: 1em 0;
  z-index: 1000
}

nav ul {
  border-top: 1px solid #ccc;
  clear: both;
  list-style: none;
  margin: 0 -1em;
  padding: 0;
  z-index: 999;
}

nav ul li {
  border-bottom: 1px solid #ccc;
  text-align: center;
}

nav ul li a {
  color: #444;
  display: block;
  padding: .75em;
}

nav.sticky {
  animation: show-header .5s ease;
  position: fixed;
  top: 0;
  width: 100%;
}

/*...

JavaScript

////////////////////////////////////
// NAVIGATION SHOW/HIDE

$("nav ul").hide();

$(".nav-toggle").click( function() {
  $("nav ul").slideToggle("medium");
});

$("nav ul li a, .brand a").click( function() {
  $("nav ul").hide();
});

////////////////////////////////////
// SMOOTH SCROLLING WITH NAV HEIGHT OFFSET

$(function() {
  var navHeight = $("nav").outerHeight();
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - navHeight
        }, 1000);
        return false;
      }
    }
  });
});

////////////////////////////////////
// NAVIGATION STICKY

var viewHeight = $(window).height();
var navigation = $('nav');

$(window).scroll( function() {
  if ( $(window).scrollTop() > (viewHeight - 175) ) { //edit for nav height
    navigation.addClass('sticky');
  } else {
    navigation.removeClass('sticky');
  }
});

////////////////////////////////////////////////
// MAKE THE SPLASH CONTAINER VERTICALLY CENTERED

function centerSplash() {
  var navHeight = $("nav").outerHeight();
  var splashHeight = $(".splash .container").height();
  var remainingHeight = $(window).height() - splashHeight - navHeight;
  $(".splash .container").css({"padding-top" : remainingHeight/2, "padding-bottom" : remainingHeight/2});
}

$( document ).ready( function() {
  centerSplash();
});

$( window ).resize( function() {
  centerSplash();
});