JSFiddle - React, Tailwind, and code Playground

by toddanglin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div class="box">
<div class="logo">    
    <div class="paneWrapper">
      <div class="pane">
      </div>
      <div class="pane">
      </div>
      <div class="pane">
      </div>
      <div class="pane">
      </div>
    </div>    
  </div>
  <div class="text">Windows 8</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

body{
    padding:50px 30px;
    font-family: Arial, sans-serif;    
}

h2{ font-size: 1.5em; }


.logo{
    -webkit-perspective: 400px;
    -webkit-perspective-origin: 50% 80px;
    
    -moz-perspective: 400px;
    -moz-perspective-origin: 50% 80px;
    
    -ms-perspective: 400px;
    -ms-perspective-origin: 50% 80px;
    
    perspective: 400px;
    perspective-origin: 30% 80px;
    
    float:left;
    
}

.paneWrapper{
    width:250px;
    height:150px;   
    
    -webkit-transform:rotateY(-35deg);
    -moz-transform:rotateY(-35deg);
    -ms-transform:rotateY(-35deg);
    transform:rotateY(-35deg);
}
  
  .pane{
    background-color: #00adef;
    width:45%;
    height:50%;
    display:inline-block;
    margin:0 5px 2px 0;
  }
  
  .text{
    color: #00adef;
    margin: 13px 0 0 270px;
    font:normal 8em/1em 'Droid Sans',san-serif;    

    white-space:nowrap;
    letter-spacing:-.05em;
}

.k-callout-s {
    background-image: "none";
    background-position-x: 100px;
    background-position-y: 100px;
}

.box{
    width:825px:
        height:200px;
position:absolute;
left:50%;
 top:50%;   
    margin:-100px 0 0 -412px;
}

JavaScript

$(function(){
    var pane = $(".pane"),
        txt = $(".text");
    
    $(document.body).bind("mousemove", function(args){
        var val = args.offsetX;
        pane.css("background-color","hsl("+ val +", 100%,50%)");
        txt.css("color", "hsl("+ val +", 100%,50%)");
    });  
});