JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/ui-darkness/jquery-ui.css">
<div id="sliders" class="ui-corner-all">
<table><tr><td>
<h1 class="ui-corner-all">MASTER</h1>
<div id="hdd"></div>
<div id="other1"></div><div id="other2" style=""></div>

<div id="other3"></div><div id="other4"></div>

</td><td><input type="text" id="value1" /></td></tr></table>
</div>

CSS

body {
background: black   
}
#sliders {
width: 450px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: rgb(255,255,255);  
background: rgba(255,255,255,0.5);   
}
td:nth-child(1) {
width: 100px
}
h1 {
font-weight: bold;
padding: 5px;
background: rgb(255,255,255);  
background: rgba(255,255,255,0.5);   
}
#master {
width:340px; 
margin:10px;  
}
#other1{
width:130px; 
margin:10px;
float:left; 
}
#other2{
width:130px; 
margin:10px;
float:right; 
}
#other3{
width:130px;
margin:10px;
float:left;   
}
#other4{
width:130px;
margin:10px;
float:right; 
}
#amount {
border:0;
background:transparent;
font-weight:bold;
width:50px;
}

JavaScript

$(function() {
    // setup master volume
    $("#hdd").slider({
        value: 60,
        min: 0,
        max: 1200,
        orientation: "horizontal",
        range: "min",
        animate: true,
        slide: function( event, ui ) {
                $( "#value1" ).val( ui.value + " Lt" );
            }
    });
    $( "#value1" ).val( $( "#hdd" ).slider( "value" ) + " Lt" );
    // Other1
    $("#other1").slider({
        value: 60,
        min: 0,
        max: 100,
        orientation: "horizontal",
        range: "min",
        animate: true
    });
        //Other2
    $("#other2").slider({
        value: 60,
        min: 0,
        max: 500,
        orientation: "horizontal",
        range: "min",
        animate: true
    });
        // Other3
    $("#other3").slider({
        value: 60,
        min: 0,
        max: 200,
        orientation: "horizontal",
        range: "min",
        animate: true
    });
        // Other4
    $("#other4").slider({
        value: 60,
        min: 0,
        max: 400,
        orientation: "horizontal",
        range: "min",
        animate: true
    });
});