JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<!-- MOBILNOE---MENU -->
<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//-->




  <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;
 

}

#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;
  
}

#menu li a:after

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


#menu li.active a:after,
#menu li.active a:before{
     width: 100%; 
}
li a:before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  right:0;
  bottom: 35px;
  background: rgb(255, 215, 163);
  transition: all 0.4s ease;  
}
#menu  a:hover {
     color: rgb(255, 215, 163);  
     
transform:...

JavaScript

$(document).ready(function () {
$(".icon-mobile-menu").click(function(ob) {
ob.stopPropagation();
$(".icon-mobile-menu").addClass("toggle");
});

$('li > a').click(function(){
	$('.icon-mobile-menu').removeClass("active");
})
});
// код меню при иш


     
     jQuery(document).ready(function($){
	// Show/hide the main navigation
	$('.icon-mobile-menu').click(function() {
  $(this).toggleClass('on');
		$('#menu').slideToggle(250);
		$(".icon-mobile-menu").toggleClass("show-x");
	});
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 768 && $('#menu').is(':hidden')) {  
        	$('#menu').removeAttr('style');  
  		}  
	});  
  $('#menu').on('click',function(e){
e.stopPropagation();
if ( $('.icon-mobile-menu').is(':visible'))
$(this).removeAttr('style');
$('.icon-mobile-menu').removeClass('on');
})
});
     
      $(document).ready(function(){
    $(window).scroll(function(){
    if ($(window).scrollTop() > 0) 
    {  
     $('#menu').addClass('fix');
     }
     else 
     {
     $('#menu').removeClass('fix');
      }
      });


    $(window).scroll(function(){
    if ($(window).scrollTop() > 100) {
    $('.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();
   ...