JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.kirupa.com/prefixfree.min.js"></script>
    <img id="onlyimg" src="http://4.bp.blogspot.com/_2mN0xk6r-Eo/TEh9lXrojWI/AAAAAAAAAuk/mDn5MDGetBE/s1600/0014.jpg">


    <div id="buttons">
        <div id="button1"><a href="#anch1"><img src="images/button.png"></a></div>
        <div id="button2"><a href="#anch2"><img src="images/button.png"></a></div>
        <div id="button3"><a href="#anch3"><img src="images/button.png"></a></div>
    </div>
    <div id="content">

<h1>Some Random Star Trek Quotes</h1>
<p><span>
        <a id="anch1">Anchor 1</a>
    <br>Captain Jean-Luc Picard: Duty. A starship captain's life is filled with solemn duty. I have commanded men in battle. I have negotiated peace treaties between implacable enemies. I have represented the Federation in first contact with twenty-seven alien species. But none of this compares with my solemn duty today... as best man. Now, I know, on an occasion such as this, it is expected that I be gracious and fulsome in my praise on the wonders of this blessed union, but have the two of you considered what you were doing to me? Of course you're happy, but what about *my* needs? This is all a damned inconvenience. While you're happily settling in on the Titan, I will be training my new first officer. You all know him. He's a tyrannical martinet who will never, *ever*, allow me to go on away missions. 
Data: That is the regulation, sir. Starfleet code section 12, paragraph 4... 
Captain Jean-Luc Picard: Mr. Data... 
Data: Sir? 
Captain Jean-Luc Picard: Shut up. 
Data: Yes, sir. 
Captain Jean-Luc Picard: [turning to the wedding guests] 15 years I've been waiting to say that. </p>
<p>
<br>
Captain Jean-Luc Picard: What is all this about? 
Praetor Shinzon: It's about destiny, Picard. It's about a Reman outcast. 
Captain Jean-Luc Picard: You're not Reman! 
Praetor Shinzon: And I'm not quite Human! So what am I? My life is meaningless as long as you're still alive. What am I while you exist? A shadow?...

CSS

body {
   
    background-color: #010001;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    line-height: 40px;
    padding: 30px;
    margin-right: 60px;
    color: #FFFFFF;
}
p span {
    background-color: rgba(1, 0, 1, .85);
}
a {
    color: #AFDBF2;
}
h1 {
    text-transform: capitalize;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 40px;
    padding: 10px;
    margin: 0px;
    background-color: rgba(178, 45, 0, .75);
    color: #EEE;
}

#onlyimg img {
    width: 100%;
    
    height: auto;
        left: 0;
    top: 0;
    z-index: -1;
}
#content {
    position: absolute;
z-index: 50;
top: 0;
}
#buttons {
    position:fixed;
    bottom:100px;
    right:10px;
    z-index:1000;
}
#buttons a:hover{
     background-color: red;
}
}

JavaScript

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

var transforms = ["transform", 
                  "msTransform", 
                  "webkitTransform", 
                  "mozTransform", 
                  "oTransform"];

var transformProperty = getSupportedPropertyName(transforms);

var imageContainer = document.querySelector("#onlyimg");

var scrolling = false;
var mouseWheelActive = false;

var count = 0;
var mouseDelta = 0;


//
// vendor prefix management
//
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

function setup() {
    window.addEventListener("scroll", setScrolling, false);

    // deal with the mouse wheel
    window.addEventListener("mousewheel", mouseScroll, false);
    window.addEventListener("DOMMouseScroll", mouseScroll, false);

    animationLoop();
}
setup();

function mouseScroll(e) {
    mouseWheelActive = true;

    // cancel the default scroll behavior
    if (e.preventDefault) {
        e.preventDefault();
    }

    // deal with different browsers calculating the delta differently
    if (e.wheelDelta) {
        mouseDelta = e.wheelDelta / 120;
    } else if (e.detail) {
        mouseDelta = -e.detail / 3;
    }
}

//
// Called when a scroll is detected
//
function setScrolling() {
    scrolling = true;
}

//
// Cross-browser way to get the current scroll position
//
function getScrollPosition() {
    if (document.documentElement.scrollTop == 0) {
        return document.body.scrollTop;
    } else {
        return document.documentElement.scrollTop;
    }
}

//
// A performant way to shift our image up or down
//
function...