JSFiddle - React, Tailwind, and code Playground

by tw16

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
    
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="oss">
            <div data-role="content">
                
                <ul data-role="listview" data-inset="true">
                    <li data-role="fieldcontain">
                        <label for="test-slider">
                            Test slider
                        </label>
                        <select id="test-slider" data-role="slider" name="testslider">
                            <option value="off">off</option>
                            <option value="on">on</option>
                        </select>
                    </li>
                </ul>
                
            </div>
        </div>
    </body>
</html>

CSS

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    display: block !important;
    padding: 0.9em 75px 0.9em 15px !important;
}
div.ui-slider-switch {
    position: absolute !important;
    right: 0 !important;
    width: 44% !important;
}