JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.greensock.com/_css/tour/greensock-theme/jquery-ui-1.9.1.custom.css">
<script src="http://www.greensock.com//js/src/tour/jquery/jquery-ui-1.9.1.custom.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<div class="demoWrapper" style="height:500px;">
    <div class="stage">
        <h1>Move your cursor over the buttons to see a variety of boxShadow effects.</h1>
       <div class="bsbg">
        <div class="bsClipHolder">
            <div id="bsBox1" class="bsClipBox">sharp shadow</div>
            <div id="bsBox2" class="bsClipBox">blur shadow</div>
            <div id="bsBox3" class="bsClipBox">black spread</div>
           </div>
        </div> 
         <div class="bsClipHolder">          
            <div id="bsBox4" class="bsClipBox" style="margin-top:25px;">orange glow</div>
            <div id="bsBox5" class="bsClipBox" style="margin-top:25px;">green pulse</div>
            <div id="bsBox6" class="bsClipBox" style="margin-top:25px;">white blur</div>
        </div> 
    </div>
            
       
    <div class="multiCodeBlock">
<pre id="bsCode1" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box1, .3, {
    css:{
        boxShadow:"10px 10px"
    }
});</pre>
<pre id="bsCode2" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box2, .3, {
    css:{
        boxShadow:"10px 10px 10px"
    }
});</pre>
<pre id="bsCode3" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box3, .3, {
    css:{
        boxShadow:"0px 0px 10px 10px black"
    }
});</pre>
<pre id="bsCode4" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box4, .3, {
    css:{
        boxShadow:"0px 0px 10px 4px #f60"
    }
});</pre>
<pre id="bsCode5" class="tweenCode overcode" style="margin-top:20px;">
TweenMax.to(box5, duration, {
        css: {
            boxShadow: "0px 0px 20px 10px #91e600"
        },
        repeat: -1,
        yoyo: true
   ...

CSS

body{
margin:0px;
}
strong{
    font-weight:bold;
    color:#fff;
}

h1{
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;
    color:#fff;
}
        
.demoWrapper{
    width:550px;
    height:400px;
    padding:1px;
    margin:-1px;
    background-color:#000;
}
.stage{
   height:325px;
   margin-top:15px;
   margin-left:15px;
   color:#ddd;
   font-family:Arial, Helvetica, Verdana;        
    -webkit-font-smoothing:antialiased;   
   
}

.tweenCode{
    font-size:14px;
    padding:4px;
    background-color:#fff;
    color:#000;
    
}


.demoWrapper a:link{
    text-decoration:none;
}


.overcode{
position:absolute;
    width:515px;
    visibility:hidden;
    
}

.bsbg{
width:515px;
background-color:#ccc;
height:60px;
padding-top:25px;
}


.bsClipHolder{

margin-left:45px;

    
}
.bsClipBox{
position:relative;
width:100px;

margin-right:32px;
background-color:#555;
display:inline-block;
cursor:pointer;
    padding:8px;
    text-align:center;
    border: solid 1px white;
}

JavaScript

var bsBox1 = $("#bsBox1"),
    bsBox2 = $("#bsBox2"),
    bsBox3 = $("#bsBox3"),
    bsBox4 = $("#bsBox4"),
    bsBox5 = $("#bsBox5"),
    bsBox6 = $("#bsBox6"),
    bsTween1, bsTween2, bsTween3, bsTween4, bsTween5, bsTween6, duration = .3;

bsBox1.data('code', $('#bsCode1'));
bsBox2.data('code', $('#bsCode2'));
bsBox3.data('code', $('#bsCode3'));
bsBox4.data('code', $('#bsCode4'));
bsBox5.data('code', $('#bsCode5'));
bsBox6.data('code', $('#bsCode6'));

bsTween1 = TweenLite.to(bsBox1, duration, {
    css: {
        boxShadow: "10px 10px",
        backgroundColor:"black"
    },
    paused: true
});
bsTween2 = TweenLite.to(bsBox2, duration, {
    css: {
        boxShadow: "10px 10px 10px",
        backgroundColor:"black"
    },
    paused: true
});
bsTween3 = TweenLite.to(bsBox3, duration, {
    css: {
        boxShadow: "0px 0px 10px 6px black",
        backgroundColor:"black"
    },
    paused: true
});

bsTween4 = TweenLite.to(bsBox4, duration, {
    css: {
        boxShadow: "0px 0px 10px 4px #f60",
        backgroundColor:"#f60",
        borderColor:"#f60"
    },
    paused: true
});

bsTween6 = TweenLite.to(bsBox6, duration, {
    css: {
        boxShadow: "0px 0px 24px 6px white",
        backgroundColor:"white",
        color:"#999"
    },
    paused: true
});





bsBox1.mouseenter(function() {
    bsTween1.play();
    showHideCode($(this).data('code'));
});


bsBox1.mouseleave(function() {
    bsTween1.reverse();
});

bsBox2.mouseenter(function() {
    bsTween2.play();
    showHideCode($(this).data('code'));
});


bsBox2.mouseleave(function() {
    bsTween2.reverse();
});

bsBox3.mouseenter(function() {
    bsTween3.play();
    showHideCode($(this).data('code'));
});


bsBox3.mouseleave(function() {
    bsTween3.reverse();
});

bsBox4.mouseenter(function() {
    bsTween4.play();
    showHideCode($(this).data('code'));
});


bsBox4.mouseleave(function() {
    bsTween4.reverse();
});


bsBox5.mouseenter(function() {
    TweenMax.fromTo(bsBox5, 0.7,...