JSFiddle - React, Tailwind, and code Playground

by aslancods

HTML

<div class="main">
    <div class="header">header
        <br/> <a href="#content1">content1</a>

<a href="#content2">content2</a>

<a href="#content3">content3</a>  <a href="#content4">content4</a>  <a href="#content5">content5</a> 
    </div>
    <div class="content"> <span id="content1" class="anchor"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus.</div>
    <div class="content"> <span id="content2" class="anchor"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus.</div>
    <div class="content"> <span id="content3" class="anchor"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus.</div>
    <div class="content"> <span id="content4" class="anchor"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non magna a augue scelerisque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit....

CSS

.main {
    padding-top:50px;
}
.content {
    margin-bottom: 20px;
    position: relative;
}
.header {
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: red;
    z-index: 9999;
}
.anchor {
    visibility: hidden;
    position:absolute;
    left:0;
    top: -100px;
}