JSFiddle - React, Tailwind, and code Playground

by chrimbus

HTML

<div id="wrp">
    <div class="nav">
        <img class="l" src="http://kolbaba.com/projects/qubeas/imgs/l.jpg">
        <img class="r" src="http://kolbaba.com/projects/qubeas/imgs/r.jpg">
    </div>
    <div id="one">
        <img class="front" src="http://kolbaba.com/projects/qubeas/imgs/front.jpg">
        <img class="right" src="http://kolbaba.com/projects/qubeas/imgs/right.jpg">
        <img class="back" src="http://kolbaba.com/projects/qubeas/imgs/back.jpg">
        <img class="left" src="http://kolbaba.com/projects/qubeas/imgs/left.jpg">
        <img class="circle" src="http://kolbaba.com/projects/qubeas/imgs/circle.png">
    </div>
</div>

CSS

body {
    background: #421114;
}
div.nav {
    width:90%;
    margin-top:25%;
    position:absolute;
}
.btn {
    width:20px;
    -moz-opacity: 0.65;
    -khtml-opacity: 0.65;
    opacity: 0.65;
}
.btn:hover {
    -moz-opacity: 100;
    -khtml-opacity: 100;
    opacity: 100;
    cursor:pointer;
}
img.r {
    float:right;
}
div#one {
    width:90%;
    margin:0 auto;
}
div#one img {
    display:none;
    margin:0 auto;
}
div#one .front {
    display:block;
}

JavaScript

$('.