JSFiddle - React, Tailwind, and code Playground

by transparent

HTML

<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
<div class="aero">
    Simple Dialog
    <center>
        <button class="aero" data-value="true" >Yes</button>
        <button class="aero" data-value="false" >No</button>
    </center>
</div>
<div class="aero">
    *Le Slider*
    <div class="scrollBar aero widget">
        <div class="scrollButton aero">
            
        </div>
    </div>
    *Le Progress-Bar*
     <div class="aero  progressBar widget">
        <div class="progress">
        </div>
    </div>

</div>


<div class="aero">
    <span>
        <div data-value='on' class="switch widget">
            <div class="knob"></div>
        </div>
    </span>
</div>
<div class="aero">
    <input type='text' placeholder="Hey there" class="widget aero" />
    <span>
    <input type='radio' name='foo' value='dark' id='f_dark'/><label for='f_dark'>Dark</label>
    </span>
    <span>
        <input type='radio' name='foo' value='yen' id='f_yen' /><label for='f_yen'>Yen</label>
    </span>
    <button class="aero" >AJ</button>
</div>
<div class="aero tabs widget">
  <nav class="aero widget">
     <a href="#home">Home</a>
     <a href="#login" class="selected">Login</a>
     <a href="#kill">Kill</a>
  </nav>
 <div class="content">
  <div id="home" class="tab">
    Dor Silat
  </div>
  <div id="home" class="tab selected">
    Lorem Ipsum
  </div>
  <div id="home" class="tab">
    Yer amet.s
  </div>
 </div>    
</div>

<div class="aero">
    <span>
    <input type='checkbox' name='foo' value='op2' id='f_op1'    /><label for='f_op1'>Option1</label>
    </span>
    <span>
        <input type='checkbox' name='foo' value='op2' id='f_op2' /><label for='f_op2'>Option2</label>
    </span>
</div>

CSS

html{
    height:auto;
    width:100%;
}
.aero{
    font-family:'Advent Pro',tahoma;
    color:white;
    text-shadow:0 0 2px black;
    padding:20px;
    position:relative;
    overflow:hidden;
    margin:20px;
    width:400px;
    height:auto;
    background:rgba(0,0,0,0.12);
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.2);
    box-shadow:0 0 8px rgba(0,0,0,0.6);
    cursor: auto;
}
.aero::after{
    position:absolute;
    right:-50px;
    top:-100px;
    width:100px;
    height:400px;
    content:' ';
    display:block;
    background:rgba(255,255,255,0.09);
    box-shadow:0 0 10px 10px rgba(255,255,255,0.1);
    -moz-transform:rotate(-30deg);
    -o-transform:rotate(-30deg);
    -ms-transform:rotate(-30deg);
    -webkit-transform:rotate(-30deg);
    transform:rotate(-30deg);
}



html{
/* a gradient might save the day */
background: -moz-linear-gradient(-45deg, rgba(65,127,186,1) 0%, rgba(34,72,151,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(65,127,186,1)), color-stop(100%,rgba(34,72,151,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(65,127,186,1) 0%,rgba(34,72,151,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(65,127,186,1) 0%,rgba(34,72,151,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(65,127,186,1) 0%,rgba(34,72,151,1) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(65,127,186,1) 0%,rgba(34,72,151,1) 100%); /* W3C */
}


button.aero{
 width:auto;
 height:auto;
 padding:5px 20px;
 box-shadow:none;
 border-radius:0px;
    -moz-transition: background 200ms;
    -webkit-transition:background 200ms;
    -o-transition:background 200ms;
    -ms-transition:background 200ms;
    transition:background 200ms;
}

button.aero:hover{
    background:rgba(0,0,200,0.1);
}


button.aero:active{
    background:rgba(0,0,200,0.3);
}
button.aero[data-value=true]:hover{
   ...

JavaScript

/* Apologies but jQuery is just here for making this faster */
/* I personally Prefer Vanilla.js to which this will be ultimately ported */

$(function() {
    $('.switch').on('click', function(e) {
        var value = $(this).attr('data-value');
        console.log(value);
        if (value === 'on') 
            $(this).attr('data-value', 'off');
        else 
            $(this).attr('data-value', 'on');
        
        e.preventDefault();
        e.stopPropagation();

    });
    $('.scrollButton').on('mousedown', function(e) {

        var self = $(this);
        var max_x = self.parent().innerWidth() - 12;
        $(document).on('mousemove', function(e) {
            var x = e.clientX - self.parent().offset().left - 6;

            if (x < max_x && x > 0) {
                self.css('left', x);
            }
            e.preventDefault();
            e.stopPropagation();
        });
        $(document).on('mouseup', function(e) {
            $(document).off('mousemove');
            $(document).off('mouseup');
            e.preventDefault();
            e.stopPropagation();
        });
        e.preventDefault();
        e.stopPropagation();
    });
});