JSFiddle - React, Tailwind, and code Playground

HTML

<script src="testarama.webege.com/leaflet.js"></script>
<script src="testarama.webege.com/wax.leaf.js"></script>
<body>
    <bound>
        <div class="main_box">
            <p>This is a background link <a rel="green">that turns green</a>.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is another background link <a rel="green">that turns green</a>.</p>
            <footer />
        </div>
    </bound>
</body>

</html>

CSS

/*** background tester ***/
 * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html, body {
    height: 100%;
}
/* Main */
 body {
    text-align: center;
    color: white;
    font-family: Georgia, Garamond, Baskerville, serif;
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0 30px;
    background: url('http://s17.postimg.org/5h4bsauzz/red.jpg') center center #222;
    background-size: cover;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
flashers {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
}
::selection {
    background: rgba(255, 255, 255, 0.7);
}
/* Backgrounds */
 @media only screen and (min-width: 640px) {
    flashers.on {
        opacity: 1;
    }
    flashers.green {
        background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');
    }
}
/* Content etc. */
 bound {
    width: 100%;
    height: 100%;
    max-width: 620px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    box-pack: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    background: rgba(0, 0, 0, 0.0);
    text-align: left;
    position: relative;
    z-index: 10;
}
/* Big displays etc. */
 @media only screen and (min-width: 640px) {
    p a {
        color: #fff;
        margin: 0 3px;
        line-height: 0em;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
    }
    p a:not([href]) {
        pointer-events: auto;
    }
    p a:hover {
        opacity: 1;
    }
    .hover_on p a[href] {
       ...

JavaScript

$(document).ready(function () {
			    $('p a').each(function () {
			        var fig = $('<flashers class="' + $(this).attr('rel') + '"></flashers>');
			        fig.appendTo('body');
			    });

			    $('p a').hover(

			    function () {
			        $('body').addClass('hover_on');
			        $(this).addClass('active');
			        $('.' + $(this).attr('rel')).addClass('on');
			    },

			    function () {
			        $('body').removeClass('hover_on');
			        $(this).removeClass('active');
			        $('.' + $(this).attr('rel')).removeClass('on');
			    });
			});


			function appendDiv() {
			    var div1 = document.getElementById('flashers'); //get the div element
			    var div2 = document.createElement("div"); //create a new div
			    div2.innerHTML = "bound";

			    div1.appendChild(div2); // append to div
			}