JSFiddle - React, Tailwind, and code Playground

by Spero Koulouras

HTML

<div data-role="page" id="wheels-page">
  
    <div class="deviceData ui-grid-c">
        <div class="deviceName ui-block-a">
            <button data-icon="bars" data-mini="true">Device Name</button>
        </div>    
        <div class="controls ui-block-b">
            <div class="ui-grid-a">
                <div class="onOff ui-block-a">
                        <label for="onOff" class="ui-hidden-accessible">Flip switch:</label>
                        <select name="onOff" data-mini="true" id="onOff" data-role="flipswitch">
                            <option value="off"></option>
                            <option value="on"></option>
                        </select>
                </div>
                <div class="mainSlider ui-block-b">
                    <label for="slider1" class="ui-hidden-accessible">slider</label>
                    <input type="range" data-mini="true" name="slider1" id="slider1"
                           min="1" max="100" value=10 data-highlight="true"/>
                </div>
            </div>
            <div class="ui-grid-solo">
                <div class="ui-block-a">
                    <div class="ui-field-contain">
                        <div data-mini="true" data-role="rangeslider">
                            <label for="rs1" class="">Min/Max</label>
                            <input id="rs1" type="range" data-mini="true" min="1" max="100" value="7" data-highlight="true" />
                            <label for="rs2" class="ui-hidden-accessible">rs2</label>
                            <input id="rs2" type="range" data-mini="true" min="1" max="100" value="94" data-highlight="true" />
                        </div>
                    </div>
                </div>
                <div class="ui-block-a">
                    <div class="ui-field-contain">
					    <label for="fade-1">Fade Time</label>
						<input type="range" pattern="\\d*" name="fade-1" 	
			                   class="fadeSlider updateDisable"...

CSS

.deviceData { padding: 0 0 0 0 }
.deviceData {margin-top: 3em; border: 1px solid #aaa}
.deviceData .ui-field-contain label,.ui-field-contain,.ui-btn,.ui-flipswitch,div.ui-slider { margin: 0; }
.deviceData label,legend {font-size: small; font-weight: 200; padding-top: 2px }
.deviceData .deviceName { width: 19%; }
.deviceData .controls { width: 75%; padding: .5em 0; }
.deviceData .delete { width: 2em; padding-top: 2px}
.deviceData .status { width: 0; margin-top: 3px; margin-left: -11em; font-size: .6em; 
                      color: blue; text-align: right;  }
.deviceData .status .alerts { color: red }
.deviceData .ui-slider-track.ui-mini { height: 4px; top: 8px; margin-left: 2.2em; margin-right: 0;
                                        border: none; box-shadow: none;}

.deviceData .ui-rangeslider-sliders { margin-right: 2em; margin-left: 0em; }
.deviceData .ui-slider-track.ui-mini .ui-slider-handle { height: 8px; width: 8px; margin: -5px 0 0 -4px; }

.deviceName .ui-btn { border: none; box-shadow: none;background: transparent;
                      text-align: left; padding-top: 12px; }

.controls .onOff { width: 1em;  }
.controls .mainSlider { width: 95%; }
.controls .ui-slider-input { width: 2em; padding: 1px; font-weight: 200; font-size: 1em;
                            border: none; box-shadow: none; background: transparent }
.controls .ui-flipswitch { width: .8em; border: none }
.controls .ui-flipswitch.ui-flipswitch-active {padding-left: 0}
.controls .ui-flipswitch .ui-btn.ui-flipswitch-on { width: .7em; height: .4em }
.controls .ui-flipswitch .ui-btn.ui-flipswitch-off { margin-top: 1.2em }