JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<span id="top"></span>

<div id="anchors">
  <a href="#red">Red</a>
  <a href="#blue">Blue</a>
  <a href="#green">Green</a>
  <a href="#yellow">Yellow</a>
</div>

<div id="red"><a href="#top">Top</a></div>
<div id="blue"><a href="#top">Top</a></div>
<div id="green"><a href="#top">Top</a></div>
<div id="yellow"><a href="#top">Top</a></div>

CSS

html {
    scroll-behavior: smooth;
    white-space: nowrap;
}

#anchors a {
  display: block;
}

a {
    display: inline-block;
    background: #fff;
    padding: 4px;
}

div {
    display: block;
    height: 400px;
    width: 400px;
    padding: 4px;
    border: 2px solid grey;
    position: relative;
}

#red {
    background: red;
    left: calc(412px * 1);
}
#blue {
    background: blue;
    left: calc(412px * 2);
}
#green {
    background: green;
    left: calc(412px * 3);
}
#yellow {
    background: yellow;
    left: calc(412px * 4);
}