JSFiddle - React, Tailwind, and code Playground

by thevenin

HTML

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="normalize.css" />
        <link type="text/css" rel="stylesheet" href="index.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div class="track"></div>
        <nav>
            <a href=""><div class="menuItem" id="index">H</div></a>
            <a href=""><div class="menuItem" id="about">A</div></a>
            <a href=""><div class="menuItem" id="portfolio">P</div></a>
            <a href=""><div class="menuItem" id="resume">R</div></a>
            <a href=""><div class="menuItem" id="contact">C</div></a>
        </nav>
        <div>
            <div class="picture" id="indexPic"></div>
            <div class="picture" id="aboutPic"></div>
            <div class="picture" id="portfolioPic"></div>
            <div class="picture" id="resumePic"></div>
            <div class="picture" id="contactPic"></div>
        </div>
    </body>
</html>

CSS

body{
    -webkit-user-select: none;
    -webkit-backface-visibility: hidden;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
    background:#fff;
}

.track{
    position:relative;
    border-style:solid;
    border-color:black;
}

.menuItem{
    position:absolute;
    background:#efefef;
    font-family:arial black;
    color:red;
    text-align:center;
}

.menuItem:hover{
    background:orange;
}

.picture{
    position:absolute;
}

#indexPic{
    background:red;
}
#aboutPic{
    background:orange;
}
#resumePic{
    background:yellow;
}
#portfolioPic{
    background:green;
}
#contactPic{
    background:purple;
}

JavaScript

var mRadius;
var mDiameter;
var tRadius;
var tDiameter;
var pRadius;
var pDiameter;

var xCenter;
var yCenter;
var noHover;

function initialize(){
    $('#index').data('loc', 0);
    $('#about').data('loc', 1.256);
    $('#portfolio').data('loc', 2.513);
    $('#resume').data('loc', 3.770);
    $('#contact').data('loc', 5.027);
    
    noHover=true;
}

function setDimensions(){
    //Get dimensions of browser
    var docHeight = $(document).height();
    var docWidth = $(document).width();
    
    //Create menu items
    if(docHeight < docWidth){ mRadius = docHeight/16; }
    else{ mRadius = docWidth/16; }
    mDiameter = 2*mRadius;
    var fontSize = mRadius;
    $('.menuItem').css('height', mDiameter).css('width', mDiameter)
        .css('-moz-border-radius', mDiameter).css('-webkit-border-radius', mDiameter)
        .css('font-size', fontSize).css('line-height', 2);
    //Centers menu items
    xCenter = docWidth/2-mRadius;
    yCenter = docHeight/2-mRadius;

    //Create track
    if(xCenter<yCenter){ tRadius = xCenter-mRadius; }
    else{ tRadius = yCenter-mRadius; }
    tDiameter = 2*tRadius;
    var border = Math.floor(tRadius/20);
    $('.track').css('height', tDiameter).css('width', tDiameter)
        .css('-moz-border-radius', tDiameter).css('-webkit-border-radius', tDiameter)
        .css('border-width', border);
    //Centers track
    var tXCenter = docWidth/2-(tRadius+border);
    var tYCenter = docHeight/2-(tRadius+border);
    $('.track').css('top', tYCenter).css('left',tXCenter);
    
    //Create picture
    if(xCenter<yCenter){ pRadius = xCenter-mDiameter; }
    else{ pRadius = yCenter-mDiameter; }
    pDiameter = 2*pRadius;
    $('.picture').css('height', pDiameter).css('width', pDiameter)
        .css('-moz-border-radius', pDiameter).css('-webkit-border-radius', pDiameter);
    //Centers picture
    var pXCenter = docWidth/2-pRadius;
    var pYCenter = docHeight/2-pRadius;
    $('.picture').css('top',...