JSFiddle - React, Tailwind, and code Playground

by shubhamjha1000

HTML

<div class="header">
  <div class="nav">
    <ul id="navlist">
      <li><a href="#first" id="nav1">Home</a></li>
      <li><a href="#second" id="nav2">Features</a></li>
      <li><a href="#third" id="nav3">About Us</a></li>
    </ul>
  </div>
  <div class="phone" align="center">
    <div class="phone-inner"></div>
  </div>
</div>

<section>
  <div class="main" id="first">
    <video width="100%" autoplay="" loop="" muted>
      <source src="vid/vids.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section>
  <div class="main" id="second"> </div>
</section>
<section>
  <div class="main" id="third"></div>
</section>

CSS

#first {
  height: 100vh;
  background: #F06A59;
}

#second {
  height: 100vh;
  background: #FB3E47;
}

#third {
  height: 100vh;
  background: #FFA306;
}

#fourth {
  height: 100vh;
  background: #528AFC;
}

#fifth {
  height: 100vh;
  background: #52FC6C;
}

#fifth {
  height: 100vh;
  background: #52FC6C;
}

#sixth {
  height: 100vh;
  background: #CFDA25;
}

.header {
  width: 100%;
  position: absolute;
  padding: 20px
}

.nav {
  position: fixed;
  width: 100%;
}

.nav ul {
  list-style: none;
}

.nav ul li {
  display: inline;
  font-size: 18px;
  margin-bottom: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.nav ul li a {
  text-decoration: none;
  color: #000;
  padding: 10px 5px 10px 70px;
  font-family: agency fb;
  font-weight: bold;
  font-size: 36px;
  text-shadow: 1px 2px 4px #000000;
}

.nav ul li a:hover {
  color: #fff;
  text-shadow: 1px 6px 4px #000000;
  transition: all 0.4s ease-in-out;
}

.nav-active {
  color: red !important;
}

.phone {
  left: 43%;
  top: 28%;
  position: fixed;
  background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
  background-size: 250px 500px;
  padding: 70px 25px 75px 25px;
  display: block;
}

.phone-inner {
  width: 200px;
  height: 355px;
  border: 1px solid #000;
}

JavaScript

navlist = [];
$("#navlist a").each(function(i) {
  var thisLink = $(this);
  var thisId = thisLink.attr('href');
  var thisTarget = $(thisId);
  navlist.push({
    'anchor': thisLink,
    'id': thisId,
    'target': thisTarget
  });
  thisLink.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: thisTarget.offset().top
    }, 800);
  });
});
$(window).on('scroll resize', function(e) {
  $.each(navlist, function(e, elem) {
    var placement = elem.target[0].getBoundingClientRect();
    if (placement.top < window.innerHeight && placement.bottom > 0) {
      history.pushState({}, '', elem.id);
      console.log('Hash: ' + elem.id);
      return false; /* Exit $.each loop */
    };
  });

});