JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header id="header">
    <p>Header</p>
    <p><a href="#sec1">sec1</a> | <a href="#sec2">sec2</a> | <a href="#sec3">sec3</a></p>
  </header>

  <section id="sec1">
    <h1>sec1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
  </section>
  <section id="sec2">
    <h1>sec2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit odio quidem in, officiis quae unde illum sed nobis natus autem.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed ad, dicta ducimus eos repellendus? Ipsam quaerat, rem, odit...

CSS

:root {
  --header-height: 80px;
}

body {
  padding-top: var(--header-height);
}

#header {
  width: 100%;
  height: var(--header-height);
  padding: 0 1em;
  position: fixed;
  top: 0;
  left: 0;
  background-color: gray;
}

JavaScript

jQuery(function($) {
  $('a[href*="#"]').click(function() {
    var height = $('#header').height(); // ヘッダーの高さ取得
    var target = $(this.hash); // 指定のID名をを持つ要素を取得
    if (!target.length) return; // 該当する要素がなければ処理を終了する
    var targetY = target.offset().top - height; // 移動先のY座標から、ヘッダーの高さを引く
    $("html,body").animate({scrollTop: targetY}); // アニメーションさせながら↑で求めたY座標に移動
  });
});