JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">

  
  <div class=buttons>
    <a href="#Skip1"><button class="Button change" id="box2">About</button></a>
    <a href="#Skip2" ><button class="Button change" id="Portfolio1">Portfolio</button></a> 
    <a href="#Skip3"><button class="Button change" id="Contact1">Contact</button></a> 
  </div>
   
</div>

<div class="push1"></div>

<div class="box2" id="Skip1">
<h1>
About me
</h1>
</div>

<div class="box3" id="Skip2">
<h1>
My Portfolio
</h1>
</div>

<div class="box4" id="Skip3">
<h1>
Contact Me
</h1>
</div>

CSS

.box1{
  width: 100%;
  height:100px;
  top:0;
  left: 0;
  background: #98F1FF; 
  position: fixed;
}

.buttons{
 display: flex;
 align-items: center;
 justify-content: center;
}

.push1{
  margin-bottom: 100px;
}

.box2{
  width: 100%;
  height:200px;
  left: 0;
  background:yellow; 
}

.box3{
  width: 100%;
  height:200px;
  left: 0;
  background: maroon; 
  display:flex;
}

.box4{
  width: 100%;
  height:200px;
  left: 0;
  background: blue; 
  display:flex;
}