JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <nav class="is-fixed">
    <ul class="topmenu">
      <li><a href="#">Home</a></li>
      <li><a href="#dev">Developers</a></li>
      <li><a href="#seo">Seo</a></li>
    </ul>
  </nav>
</section>

<section>
  <h4 id="dev">Developers</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque rerum vero maxime asperiores laudantium quisquam, inventore, vel dicta odio quo commodi suscipit voluptatum tempore totam accusamus recusandae laborum nobis eaque!</p>
</section>

<section>
   <h4 id="seo">Seo</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum quod cumque officia labore provident beatae ullam voluptatum iure, consequatur fugiat. Voluptatum soluta iure iste consequatur enim vel quis dolor, eligendi.</p>
</section>

SCSS

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-famyly: cursive;
  
  font-size: 100%;
}

section {
  min-height: 100vh;
}

.is-fixed {
  position: fixed;
  
  width: 100%;
  height: 60px;
  
  background-color: #303030;
  
  > ul {
    list-style: none;
    > li {
      display: inline-block;
     
      > a {
        display: block;
        
        padding: 5px 10px;
        
        text-decoration: none;
        text-transform: uppercase;
        
        color: #fff;
      }
    }
  }
}

JavaScript

$('.topmenu a').on('click', function (e) {
	
  var target = $(this).attr('href');
  
  $('html, body').animate({
    scrollTop : $(target).offset().top - 70 // отступ от верха
  }, 'slow')
	
  return false;

});