JSFiddle - React, Tailwind, and code Playground

by geekambassador

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 shdadow</div>
            <div id="bsBox3" class="bsClipBox">black spread</div>
           </div>
        </div> 
        <!-- <div class="bsClipHolder">          
            <div id="bsBox4" class="bsClipBox" style="margin-top:25px;">green glow</div>
            <div id="bsBox5" class="bsClipBox" style="margin-top:25px;">orange pulse</div>
            <div id="bsBox6" class="bsClipBox" style="margin-top:25px;"></div>
        </div> -->
    </div>
            
       
    <div class="multiCodeBlock">
<pre id="bsCode1" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(bsBox1, .5, {
    css:{
        boxShadow:"10px 10px"
    }
});</pre>
<pre id="bsCode2" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(bsBox2, .5, {
    css:{
        boxShadow:"10px 10px black"
    }
});</pre>
<pre id="bsCode3" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(bsBox3, .5, {
    css:{
        boxShadow:"10px 10px 20px"
    }
});</pre>
<pre id="bsCode4" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(bsBox4, .5, {
    css:{
        boxShadow:"10px 10px 20px black"
    }
});</pre>
<pre id="bsCode5" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(bsBox5, .5, {
    css:{
        boxShadow:"10px 10px 20px rgba(0, 0, 0, .3)"
    }
});</pre>  
<pre id="bsCode6" class="tweenCode overcode"...

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:#f60;
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");

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, .5, {css:{boxShadow:"10px 10px"}, paused:true});
bsTween2 = TweenLite.to(bsBox2, .5, {css:{boxShadow:"10px 10px 10px"}, paused:true});
bsTween3 = TweenLite.to(bsBox3, .5, {css:{boxShadow:"0px 0px 10px 10px black"}, paused:true});
bsTween4 = TweenLite.to(bsBox4, .5, {css:{boxShadow:"10px 10px 20px black"}, paused:true});
bsTween5 = TweenLite.to(bsBox5, .5, {css:{boxShadow:"10px 10px 20px rgba(0, 0, 0, .3)"}, paused:true});
bsTween6 = TweenLite.to(bsBox6, .5, {css:{boxShadow:"0px 0px 20px 10px black"}, 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() {
    bsTween5.play();
    showHideCode($(this).data('code'));   
    });  


bsBox5.mouseleave(function() {
    bsTween5.reverse();
}); 

bsBox6.mouseenter(function() {
    bsTween6.play();
    showHideCode($(this).data('code'));   
    });  


bsBox6.mouseleave(function() {
    bsTween6.reverse();
}); 

function showHideCode(elem){
   ...