JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top" style="position: absolute;top: 0"></div>
<div id="Dashboard">The general dashboard</div>
<div id="TheText">
    <div id="nav"> <a href="#box_1">box 1</a>

        <br /> <a href="#box_2">box 2</a>

        <br /> <a href="#box_3">box 3</a>

        <br /> <a href="#box_4">box 4</a>

    </div>
    <div id="box_1" class="box">this is the box 1
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#top">back to top</a>

    </div>
    <div id="box_2" class="box">this is the box 2
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#top">back to top</a>

    </div>
    <div id="box_3" class="box">this is the box 3
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#top">back to top</a>

    </div>
    <div id="box_4" class="box">this is the box 4
        <br />a b c
        <br />a b c
        <br />a b c
        <br /><a href="#top">back to top</a>

    </div>

CSS

#Dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    background: #cf0;
    text-align: center;
}
#TheText {
    margin-top: 40px;
}
.box {
    border: 3px solid #080;
    padding: 0.5em;
    margin: 1em;
/*    margin-top: 40px; */
}