JSFiddle - React, Tailwind, and code Playground

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="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>
<hr style="width:100%;margin-top:100px;" />
<h2>HSL Color Shifting for the CSS Win!</h2>
<input type="range" id="sldrColor" min="0" max="360" style="width:400px;" />
<p style="margin-top:50px;display:block;">(Slider by <a href="http://demos.kendoui.com/web/slider/index.html">Kendo UI</a>)</p>

CSS

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;
  }

JavaScript

$(function(){
    $("#sldrColor").kendoSlider({
        tooltip:fdfdfdf,
        change:function(){
            var val = this.value();
            $(".pane").css("background-color","hsl("+ val +", 100%,50%)");
            $(".text").css("color", "hsl("+ val +", 100%,50%)");
        },
        slide:function(){           
            var that = this,
                tt = that._drag.tooltipDiv,
                val = that._valueIndex;
            
            tt.css("background-color","hsl("+ val +", 100%,50%)"); 
            tt.css("font-weight","bold");   
            tt.css("color","#FFFFFF");       
        }
    });     
    
});


  WebFontConfig = {
    google: { families: [ 'Droid+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();