JSFiddle - React, Tailwind, and code Playground

by Sheryl Hohman

HTML

<div id="fixed">
  My fixed header
  <!--<div id="on-page-nav"> Nav Menu:
      <a href="#target-1">anchor 1</a> <a href="#target-2">anchor 2</a> <a href="#target-3">anchor 3</a> <a href="#target-4">anchor 4</a> <a href="#target-5">anchor 5</a>
      <!--</div> <!-- on-page-nav-> -->
</div> <!-- fixed -->

<div id="targets">
  <div id="target-1">
    <a href="#target-2">Jump to target 2</a>
  </div>
  <div id="target-2">
    <a href="#target-3">Jump to target 3</a>
  </div>
  <div id="target-3">
    <a href="#target-4">Jump to target 4</a>
  </div>
  <div id="target-4">
    <a href="#target-5">Jump to target 5</a>
  </div>
  <div id="target-5">
    <a href="#target-5">Jump to target 1</a>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 50px 0 0;
  font-family: "Arial";
  font-size: 1em;
}

a {
  color: #333;
}

#on-page-nav {
  color: #888;
}#on-page-nav a {
  color: #666;
}



#fixed {
  position: fixed;
  height: 50px;
  line-height: 50px;
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding-left: 5px;
}

/*
.anchor { 
  padding-top: 90px; 
}
*/ 

#targets div {
  height: 10vh;
  padding: 10px;
  color: #333;
}

#target-1 {
  background: #888;
}

#target-2 {
  background: #999;
}

#target-3 {
  background: #AAA;
}

#target-4 {
  background: #BBB;
}

#target-5 {
  background: #CCC;
}