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">
    <div class="stage">
        <h1>Sample a variety of borderRadius animations by rolling over each grey shape.</h1>
        
      
        <div id="borderRadiusBox"></div>
        <div id="borderRadiusNav">
            <div id="br1" class="borderRadiusNavBox"></div>
            <div id="br2" class="borderRadiusNavBox"></div>
            <div id="br3" class="borderRadiusNavBox"></div>
            <div id="br4" class="borderRadiusNavBox"></div>
            <div id="br5" class="borderRadiusNavBox"></div>
            <div id="br6" class="borderRadiusNavBox"></div>
        </div>
        
        
        
         <div class="multiCodeBlock">
<pre id="br1Code" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box, .5, {
    css:{        
        //all 4 corners       
        borderRadius:"25px"
    }
});</pre>
<pre id="br2Code" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box, .5, {
    css:{
        //all 4 corners    
        borderRadius:"50%"
    }
});</pre>
<pre id="br3Code" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box, .5, {
    css:{
        //top-left and bottom-right | top-right and bottom-left
        borderRadius:"0px 20px"
    }
});</pre>
<pre id="br4Code" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box, .5, {
    css:{
        //top-left | top-right and bottom-left | bottom-right              
        borderRadius:"0px 20px 50px"
    }
});</pre> 
<pre id="br5Code" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box, .5, {
    css:{
        //top-left | top-right | bottom-right | bottom-left            
        borderRadius:"0px 20px 50px 50px"
  ...

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;
    margin-right:10px;
}


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


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


#borderRadiusBox{
    position:relative;
    width:100px;
    height:100px;
    background-color:#91e600;
    border: solid 4px white;
    margin: 0px auto 0px auto;
}

#borderRadiusNav{
width:380px;
margin: 20px auto 0px auto;
}
.borderRadiusNavBox{
    width:50px;
    height:50px;
    background-color:#555;
    display:inline-block;
    margin-right:10px;
    cursor:pointer;
}

.borderRadiusNavBox:hover{
   
    background-color:#777;
 
}

JavaScript

var br1 = $("#br1"),
    br2 = $("#br2"),
    br3 = $("#br3"),
    br4 = $("#br4"),
    br5 = $("#br5"),
    br6 = $("#br6"),
    box = $("#borderRadiusBox");
    

    TweenLite.set(br1, {css:{borderRadius:"25%"}})
    TweenLite.set(br2, {css:{borderRadius:"50%"}})
    TweenLite.set(br3, {css:{borderRadius:"0% 20%"}})
    TweenLite.set(br4, {css:{borderRadius:"0% 20% 50%"}})
    TweenLite.set(br5, {css:{borderRadius:"0% 20% 50% 50%"}})
    TweenLite.set(br6, {css:{borderRadius:"50% 50% 50% 0%"}})

        
br1.data('code', $('#br1Code'));
br2.data('code', $('#br2Code'));
br3.data('code', $('#br3Code'));
br4.data('code', $('#br4Code'));
br5.data('code', $('#br5Code'));
br6.data('code', $('#br6Code'));



function showHideCode(elem){
    TweenLite.set(elem, {css:{autoAlpha:1}});      
    TweenLite.set(elem.siblings(), {css:{autoAlpha:0}});
}


br1.mouseenter(function(){
    TweenLite.to(box, .2, {css:{borderRadius:"25px"}});
    showHideCode($(this).data('code'));    
});

br2.mouseenter(function(){
    TweenLite.to(box, .2, {css:{borderRadius:"50%"}});
    showHideCode($(this).data('code'));    
});   
    
br3.mouseenter(function(){
    TweenLite.to(box, .2, {css:{borderRadius:"0px 20px"}});
    showHideCode($(this).data('code'));    
});

br4.mouseenter(function(){
    TweenLite.to(box, .2, {css:{borderRadius:"0px 20px 50px"}});
    showHideCode($(this).data('code'));    
});

br5.mouseenter(function(){
    TweenLite.to(box, .2, {css:{borderRadius:"0px 20px 50px 50px"}});
    showHideCode($(this).data('code'));    
});

br6.mouseenter(function(){
    TweenLite.to(box, .2, {css:{borderRadius:"50px 50px 50px 0px"}});
    showHideCode($(this).data('code'));    
});

//textShadow

/*
var text1 = $("#text1"),
    text2 = $("#text2"),
    text3 = $("#text3");

text1.data('code', $('#text1Code'));
text2.data('code', $('#text2Code'));
text3.data('code', $('#text3Code'));



var t1Tween = TweenLite.to(text1, .2, {css:{textShadow:"2px 2px 15px rgba(145, 233, 0, 1)",...