JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <div class="container">
            <div class="top-line clearfix">
                <div class="header-logo">
                    <img src="images/logo.png" alt="Waxom Hemepage" />
                    <span>Waxom</span>
                </div>
                <div class="header-icon">
                    <img src="images/by-icon.png" alt="" />
                    <img src="images/search-icon.png" alt="" />
                </div>
                <nav class="header-menu clearfix">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Portfolio</a></li>
                        <li><a href="">Features</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">Pricing</a></li>
                        <li><a href="">Shortcodes</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </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>

CSS

*{margin:0;padding:0;}
header{
  position: relative;
  height: 100vh;
  width: 100vw;
}
.container{
  height: 50px;
  display: flex;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.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;
  
  transform: translateX(-50%);
  min-width: 100%;
}

JavaScript

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

 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: function(slider, i) {
                    return $('<button type="button" data-role="none" role="button" tabindex="0" />').text(i + 1);
                },
                dots: false,
                dotsClass: 'slick-dots',
                draggable: true,
                easing:...