JSFiddle - React, Tailwind, and code Playground

HTML

<!--The images will be missing, didn't have a place to upload them, sorry 
 But I did make the links visible, kind of.-->
<div id="container">
    <header>
        <div id="slajd-mapa" class="menu">
            <ul>
                <li><a class="link" id="aboutme" href="#s-1">Me</a></li>
                <li><a class="link" id="ruby-lang" href="#s-2">R</a></li>
                <li><a class="link" id="php" href="#s-3">P</a></li>
                <li><a class="link" id="js" href="#s-4">JS</a></li>
                <li><a class="link" id="basic" href="#s-5">B</a></li>
            </ul>    
        </div>
    </header>
    <div id="main">
        <div id ="s-0" class="slajd">
            Start
        </div>
        <div id ="s-1" class="slajd">
            Meni
        </div>
        <div id ="s-2" class="slajd">
            Ruby
        </div>
        <div id ="s-3" class="slajd">
            Php
        </div>
        <div id ="s-4" class="slajd">
            Javascript
        </div>
        <div id ="s-5" class="slajd">
            Basic
        </div>
    </div>
    <footer>
        <div id="footer">Gibberish in Croatian you wouldn't understand anyway</div>
    </footer>
</div>

CSS

.menu ul li{
    height: 82px;
    display: table-cell;
    vertical-align: middle;
    width: inherit;
}

.menu ul li a {
    margin-left: 10px;
    margin-right: 10px;
}

.menu ul li:first-child a {
    margin-left: 10px;
}

.menu ul li:last-child a {
    margin-right: 10px;
}

    .menu #omeni, #omeni a, #omeni a:visited {
    text-decoration: none;
    font-style: italic;
    color: #333;
        font-family: "Times New Roman", Helvetica, "Calibri", Arial;
        font-size: 30px;
    }

    .menu #ruby-lang {
    display: inline-block;
    background: #f33;
    width: 96px;
    height: 36px;
    }

    .menu #php {
    display: inline-block;
    background: #44f;
    width: 87px;
    height: 46px;
    }

    .menu #js {
    display: inline-block;
    background: #fc3;
    width: 111px;
    height: 22px;
    }

    .menu #basic {
    display: inline-block;
    background: #3f3;
    width: 105px;
    height: 19px;
    }

#main {
    min-height: 100%;
    padding-bottom: 60px;
}

#footer {
    position:absolute;
    bottom:0;
    height: 60px;
    width: 100%;
    text-align: center;
}

.slajd {
    display: none
}

JavaScript

(function() {
    var element = function(str) {
        return document.getElementById(str);
        },

        parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
        len = parent.length,

        slides = slides || [];

    for (var i=0; i<len; i++) {
        var link = parent[i].getElementsByTagName('a')[0],
            slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));


        if (addEventListener) {
            link.addEventListener('click', function(event){
                event.preventDefault();
                alert(slide.getAttribute('id'));
            });
        } else if (attachEvent) {
            
        }
    }

})();