JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="circle"></div>

<div id="sCircle">Flip Switch</div>

<div id="box-outerwrapper">
<div id="box1-wrapper" class="bw on">
    <div id="box1" class="box">
        <div id="box1-image" class="bi">1</div>
    </div>
    <div class="ss"><p>1</p></div>
</div>
<div id="box2-wrapper" class="bw">
    <div id="box2" class="box on">
        <div id="box2-image" class="bi">2</div>
    </div>
    <div class="ss"><p>1</p></div>
</div>
</div>

CSS

body{
  background:url('http://subtlepatterns.com/patterns/irongrip.png');
}

#circle {
    position:absolute;
    top:80px;
    left:130px;
    border-radius:100px;
    width:150px;
    height:150px;
    background-color:rgb(40,219,255);
/*background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(40,219,255)),
    color-stop(0.5, rgb(61,174,255)),
    color-stop(1, rgb(117,248,255))
);*/
    box-shadow:0 -2px 10px rgba(0,0,0,0.9) inset,
                 0 1px 20px rgba(40,219,255,0.4),
                 0 0px 10px rgba(40,219,255,0.8);
    -webkit-transition:500ms ease-in-out;
}

#sCircle {
    width:130px;
    height:130px;
    position:absolute;
    top:90px;
    left:140px;
    border-radius:100px;
    background:url('http://subtlepatterns.com/patterns/irongrip.png');
    box-shadow:0 0 10px rgba(40,219,255,0.9) inset,0 0 20px rgba(0,0,0,0.9) inset;
    -webkit-transition:500ms ease-in-out;
    color:#fff;
    font-size:30px;
    text-align:center;
}

#box-outerwrapper{
    position:relative;
    top:250px;
    left:100px;
    width:210px;
    height:58px;
    background:black;
    border-radius:10px;
    border-bottom:1px solid rgba(255,255,255,0.5);
}

.bw {
    position:absolute;
    -webkit-perspective:500;
    -webkit-transform-style:preserve-3d;
}

#box1-wrapper{
    top:4px;
    right:5px;
}

#box2-wrapper{
    top:4px;
    left:5px;
}

.box {
   width:100px;
    height:50px;
    -webkit-transform-origin:0px 0;
    -webkit-transition:250ms linear;
    -webkit-perspective:100;  
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
}

#box2 {
    -webkit-transform-origin:100px 0;
}

.bw.on #box1{
    -webkit-transform:rotateY(-30deg);
}
.bw.on #box2{
    -webkit-transform:rotateY(30deg); 
}

.bi {
    background:#ffffff;
    font-family:verdana;
    text-align:center;
    line-height:52px;
    color:#d6d6d6;
    font-weight:bold;
    width:100px;
    height:50px;
    float:right;
   ...

JavaScript

$('.bw').click(function(){
    if($(this).hasClass('on')){
        $(this).removeClass('on');
        $('.bw').not(this).addClass('on');
    }

    if($(this).attr('id') == 'box1-wrapper'){
        $('#circle').css('background-color','rgb(255,61,87)');
        $('#circle').css('-webkit-transform','rotateZ(200deg)');
        $('#circle').css('box-shadow','0 -2px 10px rgba(0,0,0,0.9) inset,0 1px 20px rgba(255,61,87,0.4),0 0px 10px rgba(255,61,87,0.8)');
        $('#sCircle').css('box-shadow','0 0 10px rgba(255,61,87,0.9) inset,0 0 20px rgba(0,0,0,0.9) inset');
    }
    else {
        $('#circle').css('background-color','rgb(40,219,255)');
        $('#circle').css('-webkit-transform','rotate(0deg)');
        $('#circle').css('box-shadow','0 -2px 10px rgba(0,0,0,0.9) inset,0 1px 20px rgba(40,219,255,0.4),0 0px 10px rgba(40,219,255,0.8)');
        $('#sCircle').css('box-shadow','0 0 10px rgba(40,219,255,0.9) inset,0 0 20px rgba(0,0,0,0.9) inset');
    }
});