JSFiddle - React, Tailwind, and code Playground

by moosefetcher

HTML

<div id="container">
    <div class="navLeft"></div>
    <div class="content"></div>
    <div class="navBottom"></div>
</div>

CSS

.scroller {
    position: relative;
    perspective: 150;
    -webkit-perspective: 150;
    -ms-perspective: 150;
    -moz-perspective: 150;
}
.artistBox {
    width: 228px;
    height: 268px;
    background-color: #000000;
    border-radius: 16px;
    position: absolute;
    overflow: hidden;
    z-index: 4;
}
.artistBox p {
    position: absolute;
    font-family:"Arial", sans-serif;
    color: white;
    font-size: 22px;
}
.artistBoxFront {
    z-index: 5;
}
.artistBoxNew {
    z-index: 3;
    opacity: 0;
}
.scrollerButton {
    position: absolute;
    top: 128px;
    width: 32px;
    height: 32px;
    border: 2px solid white;
    border-radius: 32px;
    background-color: #F49D19;
    box-shadow: 1px 1px 3px #555588;
    z-index: 6;
}
.scrollerButtonOver {
    background-color: #ffaa26;
    box-shadow: 2px 2px 3px #555588;
}

JavaScript

var scrollerLoop = 0;
var scrollerCounter = 0;
var scrollerScrolling = false;
var artists = new Array('Artist 1', 'Artist 2', 'Artist 3', 'Artist 4');

$('.content').append("<div id='scroller'></div>");
$('#scroller').addClass("scroller");
var $scroller = $('#scroller');
for (scrollerLoop = 0; scrollerLoop < 4; scrollerLoop++) {
    $scroller.append('<div id="artist' + scrollerLoop + '"><p>' + artists[scrollerLoop] + '</p></div>');
    var artistId = '#artist' + scrollerLoop;
    $(artistId).addClass("artistBox").hide();
    console.log("adding artist box number " + scrollerLoop);
}
$scroller.addClass("scroller");
$scroller.append('<div id="leftScrollerButton"></div>');
$('#leftScrollerButton').addClass("scrollerButton");
$('#leftScrollerButton').css("left", "8px");
$('#leftScrollerButton').hover(

function () {
    $(this).css('cursor', 'pointer');
    $(this).toggleClass("scrollerButtonOver")
},

function () {
    $(this).toggleClass("scrollerButtonOver")
});
$('#leftScrollerButton').click(

function () {
    rotateScroller(-1);
});
$scroller.append('<div id="rightScrollerButton"></div>');
$('#rightScrollerButton').addClass("scrollerButton");
$('#rightScrollerButton').css("left", "472px");
$('#rightScrollerButton').hover(

function () {
    $(this).css('cursor', 'pointer');
    $(this).toggleClass("scrollerButtonOver")
},

function () {
    $(this).toggleClass("scrollerButtonOver")
});
$('#rightScrollerButton').click(

function () {
    rotateScroller(1)
});
$('#artist' + scrollerCounter).toggleClass("artistBoxFront");
for (var loop = -1; loop < 2; loop++) {
    positionArtistBox(scrollerCounter + loop);
}

function positionArtistBox(p_index) {
    var idIndex = modArtistIndex(p_index); // p_index still used to get index 'position' relative to central artistBoxScroller
    $('#artist' + idIndex).show().css('left', 244 + ((p_index - scrollerCounter) * 266) + 'px').css('top', '8px');
    if (idIndex != scrollerCounter) {
        $('#artist' +...