JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation"
    data-79-start=""
    data-80-start=""
    data-anchor-target="#navbar"
>
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><span>vm.pl</span></a>
        </div>
        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav">
                <!--<li><a href="about.html">O nas</a></li>-->
                <li><a href="services.html">Usługi</a></li>
                <li><a href="products.html">Produkty</a></li>
                <li><a href="customers.html">Klienci</a></li>
                <li><a href="portfolio.html">Realizacje</a></li>
                <li><a href="fairs.html">Targi</a></li>
                <li><a href="work.html">Praca</a></li>
                <li><a href="contact.html">Kontakt</a></li>

                <a href="" class="social"><i class="fa fa-facebook-square fa-lg"></i></a>
                <a href="" class="social"><i class="fa fa-google-plus-square fa-lg"></i></a>
                <a href="" class="social"><i><img src="gfx/lang-pl.png"></i></a>

            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

CSS

#navbar {
  min-height: 100px;
  background-color: #f2f2f2;
  border-bottom: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#navbar .navbar-brand {
  display: block;
  background: transparent url(../gfx/logo.png) no-repeat 0 0;
  width: 145px;
  height: 42px;
  position: relative;
  margin-top: 28px;
  margin-right: 20px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#navbar .navbar-brand span {
  position: absolute;
  left: -1000px;
}
#navbar .navbar-nav {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 16px;
}
@media (min-width: 1200px) {
  #navbar .navbar-nav {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  #navbar .navbar-nav {
    font-size: 20px;
  }
}
#navbar .navbar-nav > li > a {
  padding-top: 40px;
  padding-bottom: 40px;
  color: #474747;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#navbar .navbar-nav > li > a:hover,
#navbar .navbar-nav > li > a:focus {
  background-color: #2b2b2b;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#navbar .navbar-nav > .active > a,
#navbar .navbar-nav > .active > a:hover,
#navbar .navbar-nav > .active > a:focus {
  background-color: transparent;
  padding-bottom: 35px;
  border-bottom: 5px solid #f9ba00;
  color: #f9ba00;
}
#navbar .social {
  color: #474747;
}
#navbar .social i {
  font-size: 28px;
  margin: 41px 0px 37px 10px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#navbar .social:hover {
  color:...

JavaScript

jQuery(document).ready(function($) {
  $('#banner-fade').bjqs({
    height      : 111320,
    width       : 111200,
    responsive  : true,
    hoverpause  : false,
    nexttext    : '<i class=\"fa fa-angle-right\"></span>',
    prevtext    : '<i class=\"fa fa-angle-left"></span>',
    fullscreen  : true,
  });
  $('#slide-main').bjqs({
    height      : 290,
    width       : 11111,
    responsive  : true,
    hoverpause  : false,
    showcontrols: false
  });
});

(function($) {

    $window = $(window);
    $slide = $('#slide-main');
    $body = $('body');
    
    function adjustWindow() {
        
        // Get window size
        winH = $window.height();
        winW = $window.width();
        
        // Keep minimum height 550
        if (winH <= 550) {
            winH = 550;
        }
        
        if (winW > 1024) {
            // Init Skrollr
            var s = skrollr.init();
            
            // Resize our slides
            $slide.height(winH);
            
            // Refresh Skrollr after resizing our sections
            s.refresh($('#slide-main'));
        } else {
            // Init Skrollr
            var scrollrInit = skrollr.init();
            scrollrInit.destroy();
        }
        /*
        if (Modernizr.touch) {
            var scrollrInit = skrollr.init();
            scrollrInit.destroy();
        }
        */
    }
    
    function initAdjustWindow() {
        return {
            match : function() {
                adjustWindow();
            },
            unmatch : function() {
                adjustWindow();
            }
        };
    }
    
    enquire.register("screen and (min-width : 1025px)", initAdjustWindow(), false);
    
}) (jQuery);

// Init Hyphenator
Hyphenator.run();