JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="demo">
    
    
        
    
<div id="bar">
    <div id="top">
        <div class="background"></div>
    </div>
    <div id="front">
        <div class="background"></div>
    </div>
</div>
    
<div id="slider"></div>
    
</div>

CSS

body {
    background: #efefef;
}

#bar {  
    margin: 50px auto;      
    -webkit-perspective: 200;
    display: block;
    width: 400px;
    -webkit-transform-style: preserve-3d;
}

#front, #top {
    display: block;
    width: 400px;
    height: 50px;
    background: #e9e9e9;
    margin: 0;
    z-index: 0;
}

#top {
    background: #f9f9f9;
    -webkit-transform: rotateX( 70deg );
    -webkit-transform-origin: center bottom;
}

.background {
    height: 50px;
    background: #9cde45;
    width: 50%;
}

#top .background {
}

#front {
    background-image: linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
background-image: -o-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(204,204,204)),
    color-stop(1, rgb(228,228,228))
);
}

#front {
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.2);
}

#front .background {
    background-image: linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
background-image: -o-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
background-image: -moz-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
background-image: -ms-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(74,175,27)),
    color-stop(1, rgb(130,208,47))
);
}

#slider {
    width: 400px;
    margin: 0 auto;
}

JavaScript

$(function() {
    $("#slider").slider({
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $(".background").width(ui.value + "%");
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));
});