JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<header>
        	<div id="nav-anchor"></div>
        	<section>
                <h1><a href="#" title="BASTIDOR DIGITAL" class="tape">Bastidor Digital</a></h1>
                <ul>
                    <li class="active"><a href="#clientes" title="HOME">HOME</a></li>
                    <li title="O BASTIDOR DIGITAL"><a href="#clientes">O BASTIDOR DIGITAL</a></li>                        
                    <li title="O QUE FAZEMOS"><a href="#clientes">O QUE FAZEMOS</a></li>
                    <li title="CLIENTES"><a href="#clientes">CLIENTES</a></li>                        
                    <li><a href="#clientes" title="CONTATO">CONTATO</a></li>
                </ul>
                <nav>
                	<a href="https://www.youtube.com/channel/UCZIPKv0XGHlkKr0bPO1PbtQ" title="YouTube" rel="external">YouTube</a>
                    <a href="https://www.facebook.com/bastidordigital/?ref=ts&fref=ts" title="FACEBOOK" rel="external">FACEBOOK</a>
                    <a href="https://instagram.com/bastidordigital" title="INSTAGRAM" rel="external">INSTAGRAM</a>
                </nav>
            </section>
        </header>
        <div class="ex">
        
        </div>
        <div id="clientes">
        clientes
        </div>
         <div class="ex">
        
        </div>

CSS

body {
  margin: 0;
}
header {
  height: 152px;
  margin: 0;
  padding:0;
  background-color: red;
  position:fixed;
}
header * {
  display: inline-block;
  margin: 0;
}
#clientes {
  padding: 20px;
  background-color: blue;
}
.ex {
  height: 1300px;
  background-color: green;
}

JavaScript

$('header ul a').on('click', function(evn) {
  evn.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr('href')).offset().top - $('header').height()
  }, 500);
});