JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="page-top">
  <header>
    <div class="header-tinting">

      <div class="mobile-menu-b"></div>
      <button class="icon-mobile-menu">
        <span></span>
        <span></span>
        <span></span>
      </button>

      <nav id="menu">
        <ul>
          <li class="active"><a href="#ex1">Home</a></li>
          <li><a href="#ex2">About</a></li>
          <li><a href="#ex3">Resume</a></li>
          <li><a href="#ex4">Portfolio</a></li>
          <li><a href="#ex5">Blog</a></li>
          <li><a href="#ex4">Contact Me</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <!-- Header End//-->

  <!-- Footer //-->
  <div id="content">
    <section id="home">
      ...
    </section>
    <div class="separator"></div>
    <section id="ex2">
      <h2>Yjkl;af</h2>
    </section>
    <div class="separator"></div>
    <section id="ex3">
      <h2>Yjkl;af</h2>
    </section>
    <div class="separator"></div>
    <section id="ex4">
      ...
    </section>
  </div>
  <!-- Footer End//-->
  </div>



  <script>


  </script>
</body>

CSS

body {
      height: 100%;
  width: 100%;

    background:#D6D7D0;
}

body {
  font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
}
#page-top {width:auto;
       min-height:1500px;
        margin:auto; 
        padding:0px 0px 0px 0px; 
        background:rgb(156, 140, 202); 
        top: auto;
   box-shadow: 0px 0px 10px 5px rgba(0,0,0, .2);
      }
     
   

 header {
       position: relative;
  width: auto;
min-height: 736px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url('../img/StockSnap_ZV0YSZWGO6.jpg');
  text-align: center;
  color: white;
      background-size: cover;
}
    
 /*Меню*/
  
#menu{
 
  position: absolute;
 top: 0 px;
  left: 0px;
  width: 100%;
 height: 70px;
 
      opacity:1;
 transition:all 0.5s linear;
-moz-transition:all 0.5s 0 linear;
-webkit-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
}

#menu ul{
    list-style: none; /*убираем маркеры списка*/
    position: relative;
    float: right;
    margin-right:40px;
    display: inline-table; 
      font-size: 9pt;
    
}
#menu a {
   margin: 15px;
     /*    float: left;*/
        top: 13px;
        padding: 10px 10px 10px 10px;
        color: rgb(255, 255, 255);
        text-transform: uppercase;
         text-decoration: none;
             font-family: 'Droid Sans', sans-serif;
     position: relative;
      font-weight: 100;
   
  }
   #menu li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
    text-align: -webkit-match-parent;
     transition: .5s linear;
}

#menu li a:after

 {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0px;
  background: rgb(255, 215, 163);
  transition: all 0.4s ease;  
}


#menu li.active a:after,
#menu li.active a:before{
     width: 100%; 
}
li a:before {
  content: "";
  width: 0;
...

JavaScript

jQuery(window).resize(function() {
    if (window.innerWidth<=767) 
    {
         $('.mobile-menu-b').addClass('mobile-menu');
      $('#menu').removeClass('fix');

    }
    else {
         $('.mobile-menu-b').removeClass('mobile-menu');
     $('#menu').addClass('fix');
   
    }           
   });         
      $(document).ready(function(){
    $(window).scroll(function(){
    if ($(window).scrollTop() > 0) 
    {  
     $('#menu').addClass('fix');
     }
     else 
     {
     $('#menu').removeClass('fix');
      }
      });


    $(window).scroll(function(){
    if ($(window).scrollTop() > 0) {
    $('.mobile-menu-b').addClass('mobile-menu');

    }
    else 
    {
    $('.mobile-menu-b').removeClass('mobile-menu');
   
    }
  });

}); 
$(document).ready(function(){
// Cache selectors
var lastId,
  topMenu = $("#menu"),
  topMenuHeight = topMenu.outerHeight() + 15,
  // All list items
  menuItems = topMenu.find("a"),
  // Anchors corresponding to menu items
  scrollItems = menuItems.map(function() {
    var item = $($(this).attr("href"));
    if (item.length) {
      return item;
    }
  });

// Bind click handler to menu items
// so we can get a fancy scroll animation

menuItems.click(function(e) {
  var href = $(this).attr("href"),
    offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
  $('html, body').stop().animate({
    scrollTop: offsetTop
  }, 1300);
  e.preventDefault();
    $('.icon-mobile-menu').toggleClass('on');
});

// Bind to scroll
$(window).scroll(function() {
  // Get container scroll position
  var fromTop = $(this).scrollTop() + topMenuHeight;

  // Get id of current scroll item
  var cur = scrollItems.map(function() {
    if ($(this).offset().top < fromTop)
      return this;
  });
  // Get the id of the current element
  cur = cur[cur.length - 1];
  var id = cur && cur.length ? cur[0].id : "";

  if (lastId !== id) {
    lastId = id;
    // Set/remove active class
    menuItems
     ...