JSFiddle - React, Tailwind, and code Playground

by godhong

HTML

<head>
        <title>Time Slider | jQuery UI Plugin Demo</title> 
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/dot-luv/jquery-ui.css" /> 
	    <style> 
		    .slider{width:400px; float:left;}
		    .slider, #slider1, #slider2, table{margin:10px;}
	    </style>     
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script> 
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
        <script src="jquery.ui.timeslider.js"> </script>
    </head>
    <body>
        <h1>Time Slider jQuery UI Plugin Demo</h1>
        <div class="slider">
            <div id="slider1"></div> 
            <div id="time1"></div> 
            <input type="submit" id="schedule-submit1" class="ui-state-default" value="Submit" />

            <table id="schedule1">
    	        <thead>
		            <tr>
                        <th>Slider</th>
	    		        <th>Time</th>
    			    </tr>
	            </thead>
	            <tbody>
	            </tbody>
            </table>
        </div>
        <div class="slider">
            <div id="slider2"></div> 
            <div id="max2"></div> 
            <div id="time2"></div> 
            <input type="submit" id="schedule-submit2" class="ui-state-default" value="Submit" />

            <table id="schedule2">
	            <thead>
		            <tr>
                        <th>Slider</th>
			            <th>Start Time</th>
			            <th>End Time</th>
    			    </tr>
	            </thead>
	            <tbody>
	            </tbody>
            </table>
        </div>
        <script>
        
        $("#slider1").timeslider({
            sliderOptions: {
                orientation: 'vertical',
		        min: 300, 
		        max: 1739, 
                value: 900,
		   ...