JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<header>
  hello
  
  <a href="#heading-10">go to 10</a>
</header>

<div>
  <h3 id="heading-1">Lorem ipsum dolor sit amet.</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam odit aspernatur tempore recusandae odio delectus illo, iure ullam accusantium, nulla fugit eum facilis, eius ex.</p>
</div>
<div>
  <h3 id="heading-2">Nesciunt sapiente aliquam aspernatur, fuga.</h3>
  <p>Inventore fuga eveniet impedit at maxime nulla similique earum sit ex ipsum aliquid a expedita voluptate vitae iure, reprehenderit quam voluptatibus facilis quidem quos molestiae!</p>
</div>
<div>
  <h3 id="heading-3">Deserunt aut, voluptatum natus quae!</h3>
  <p>Laboriosam, sint, eum! Repellendus officia, quas voluptates tempora laudantium. Voluptatum optio qui ut sapiente eius, quia quo dolorum quasi, vero numquam iste ipsa ex reiciendis?</p>
</div>
<div>
  <h3 id="heading-4">Ducimus sint pariatur, fuga dolores.</h3>
  <p>Ipsum nulla nisi laboriosam consequatur fugit iure incidunt minima officiis unde officia ea nostrum sint cupiditate ut delectus sequi ratione fuga, esse, sunt itaque eos.</p>
</div>
<div>
  <h3 id="heading-5">Perspiciatis, itaque est error nesciunt.</h3>
  <p>Delectus ipsum nulla similique optio quibusdam consequuntur distinctio deleniti natus totam amet! Quos omnis eos maiores, aliquid maxime ipsum dolor adipisci id recusandae! Beatae, quasi.</p>
</div>
<div>
  <h3 id="heading-6">Porro architecto incidunt pariatur repellat.</h3>
  <p>Reprehenderit ad nesciunt possimus est voluptatem nam? Aspernatur earum odio ad quia fugiat fuga! Aliquam cumque, error! Ducimus et omnis expedita cupiditate, odio nobis porro.</p>
</div>
<div>
  <h3 id="heading-7">Doloribus beatae ipsam quasi similique?</h3>
  <p>Numquam fugit ipsam debitis consequatur, excepturi maxime totam quisquam nulla expedita autem! Officiis vel facilis suscipit fuga dolore quos, adipisci nihil ex esse. Aperiam, cupiditate!</p>
</div>
<div>
  <h3 id="heading-8">Ex obcaecati quidem, vero...

SCSS

header {
  position: fixed;
  width: 100%;
  height: 10rem;
  top: 0;
  left: 0;
  background: silver;
}


h3 {
  &::before {
    content: '';
    width: 0px;
    height: 10rem;
    display: block;
  }
  
  margin-top: -10rem;
}