JSFiddle - React, Tailwind, and code Playground

HTML

<header>
            <div class="top-line clearfix" id="top-line">
                <div class="top-line_left">
                  <div class="header-logo">
                    <img src="images/logo.png" alt="Waxom" />
                    <span>Waxom</span>
                  </div>
                </div>
                <div class="top-line_right">
                  <div class="header-icon">
                    <img src="images/by-icon.png" alt="" />
                    <img src="images/search-icon.png" alt="" />
                  </div>
                  <nav class="header-menu clearfix">
                    <a href="">Home</a>
                    <a href="">About Us</a>
                    <a href="">Portfolio</a>
                    <a href="">Features</a>
                    <a href="">Blog</a>
                    <a href="">Pricing</a>
                    <a href="">Shortcodes</a>
                    <a href="">Contact</a>
                  </nav>
                </div>
            </div>
        <div class="slider">
            <div class="slide">
                <img src="http://veented.info/waxom/wp-content/uploads/2015/11/mountain2.jpg" alt="">
            </div>
            <div class="slide">
                <img src="http://veented.info/waxom/wp-content/uploads/revslider/image-hero/iceberg.jpg" alt="">
            </div>
            <div class="slide">
                <img src="http://veented.info/waxom/wp-content/uploads/2015/11/mountain2.jpg" alt="">
            </div>
            <div class="slide">
                <img src="http://veented.info/waxom/wp-content/uploads/revslider/image-hero/iceberg.jpg" alt="">
            </div>
        </div>
        <div class="slider-fon"></div>
    </header>
    <section><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur consectetur, ratione possimus rem nemo obcaecati explicabo nostrum tempora veritatis, natus deserunt voluptatum ab molestias consequuntur! Odio vero, quas inventore...

CSS

*{margin:0;padding:0;}
header{
  position: relative;
  z-index: 2;
  height: 100vh;
  width: 100vw;
}
.container{
  position: relative;
  z-index: 2;
  height: 100%;
}
.top-line{
  height: 50px;
  line-height:50px;
  background: rgba(255,255,255,.2);
  color: #fff;
  position: fixed;
  z-index: 2;
  top:0;
  left:0;
  right:0;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;
}
.top-line.active{
  background: rgba(255,255,255,1);
  color: #444;
}
.top-line, .top-line > div, .header-logo, nav{
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
}
nav{
  
}
nav a{
  color: #fff;
  text-decoration: blink;
  padding: 0 5px;
}
.top-line.active nav a{
  color: #444;
}
.header-logo{
  padding: 5px;
  line-height: 40px;
}
.header-logo img{
  margin: 5px;
}
.slider{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.slide{
  height: 100vh;
  display: inline-block;
  font-size: 0;
  outline: none;
  position: relative;
  overflow: hidden;
}
.slide img{
  pointer-events: none;
  user-select: none;
  position: absolute;
  top:0;
  left:50%;
  bottom:0;
  margin:auto 0;
  height: 100%;
  transform: translateX(-50%);
  min-width: 100%;
}
section{
  position: relative;
  z-index: 1;
  padding: 50px 0;
  text-align: center;
}

JavaScript

$(document).scroll(function(){
  var scroll = $(this).scrollTop();
  var nav = $('#top-line');
  if (scroll > 0) {
    if (!nav.hasClass('active')) {
      nav.addClass('active');
    }
  } else {
    if (nav.hasClass('active')) {
      nav.removeClass('active');
    }
  }
});



/*
     _ _      _       _
 ___| (_) ___| | __  (_)___
/ __| | |/ __| |/ /  | / __|
\__ \ | | (__|   < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
                   |__/

 Version: 1.6.0
  Author: Ken Wheeler
 Website: http://kenwheeler.github.io
    Docs: http://kenwheeler.github.io/slick
    Repo: http://github.com/kenwheeler/slick
  Issues: http://github.com/kenwheeler/slick/issues

 */
/* global window, document, define, jQuery, setInterval, clearInterval */
(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
    'use strict';
    var Slick = window.Slick || {};

    Slick = (function() {

        var instanceUid = 0;

        function Slick(element, settings) {

            var _ = this, dataSettings;

            _.defaults = {
                accessibility: true,
                adaptiveHeight: false,
                appendArrows: $(element),
                appendDots: $(element),
                arrows: true,
                asNavFor: null,
                prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
                nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
                autoplay: false,
                autoplaySpeed: 3000,
                centerMode: false,
                centerPadding: '50px',
                cssEase: 'ease',
                customPaging:...