JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header><h1>Page Title</h1></header>
<aside><p>Some aside in which the link may be separate from the text. <a href="#oneUrl"></a></p></aside>
<div id="wrapper">

<p>Some relevant text with a <a class="slimHTML" href="#oneUrl">inline</a> link. You probably don't really want to leave these blank, as the link will probably <a class="slimHTML" href="#twoUrl">want to</a> be part of the text. However, if you plan it carefully, you could do some funky reduction of <a class="slimHTML" href="#threeUrl">link code</a>. But again, you really need to ask why and should I? Besides the fact that at present the best you could do is three total links off one anchor element.
</p>
</div>
<footer></footer>
</body>

CSS

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 3em;
    background: yellow;
}

h1 {
    font-size: 1.5em;
    margin: .5em;
}

footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2em;
    background: yellow;   
}

#wrapper {
    margin: 3em 0 2em 75px;
}

aside {
    position: fixed;
    left: 0;
    top: 3em;
    bottom: 2em;
    width: 70px;
    background: cyan;
}

.slimHTML:before,
.slimHTML:after {
    position: fixed;
    font-size: 1em;
    z-index: 100;
}

.slimHTML[href="#oneUrl"]:before {
    /* header */
    content: 'One Link';
    right: 50%;
    top: 1.5em;
}
.slimHTML[href="#twoUrl"]:before {
    /* header */
    content: 'Two Link';
    right: 25%;
    top: 1.5em;
}
.slimHTML[href="#threeUrl"]:before {
    /* header */
    content: 'Three Link';
    right: 0;
    top: 1.5em;
}
.slimHTML[href="#oneUrl"]:after {
    /* footer */
    content: 'One Link';
    left: .5em;
    bottom: .25em;
}
.slimHTML[href="#twoUrl"]:after {
    /* footer */
    content: 'Two Link';
    right: .5em;
    bottom: .25em;
}

.slimHTML[href="#threeUrl"]:after {
    /* aside */
    content: 'Three Link';
    left: 0;
    bottom: 3em;
    font-size: .8em;
}