JSFiddle - React, Tailwind, and code Playground

by naveennsit

HTML

<div data-role="page" id="Home" > 

<a href="#" data-role="button" data-transition="none" data-corners="false" id="" class="CancelSettingButton_h">Cancel</a>
</div>
<div data-role="page" id="realTimeScreen" > 
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">

        <h1 class="ui-title"  id="heading" style="text-align:left;margin-left: 20px;" ></h1>
        <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
            <a ><img src="img/Follow-Realtime.png" class="follow_h"id=""/></a>
            <a><img src="img/Stop-Realtime.png" id="" class="stop_h"/></a>
            <a><img src="img/Email-Document.png" id="" class="email_h"/></a>
            <a><img src="img/search.png" id="" class="search_h" /></a>
            <a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
            <a><img src="img/Export-Realtime.png" id="" class="exportRealTime_h"/></a>
        </div>
    </div>
    
    
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">

        <h1 class="ui-title"  id="heading" style="text-align:left;margin-left: 20px;" ></h1>
        <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
            <a ><img src="img/Follow-Realtime.png" class="follow_h"id=""/></a>
            <a><img src="img/Stop-Realtime.png" id="" class="stop_h"/></a>
            <a><img src="img/Email-Document.png" id="" class="email_h"/></a>
            <a><img src="img/search.png" id="" class="search_h" /></a>
            <a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
            <a><img src="img/Export-Realtime.png" id="" class="exportRealTime_h"/></a>
        </div>
    </div>
         <div data-role="fieldcontain" class="sliderContend_h" style=" display: none; padding-top:10px;">

                             <input type="range" name="slider-2" id="slider-2" value="15" min="15" max="25"  class="slider_h"...

JavaScript

$(document).on('click', '.CancelSettingButton_h', function(event) {
       //   event.stopPropagation();

    
  
   $.mobile.changePage($("#realTimeScreen"));

});
$(document).on('click', '.stop_h', function() {
 
   $.mobile.changePage($("#Home"),{transition:'none'});
});

$(document).on('click', '.follow_h', function() {
 
  
   $(".sliderContend_h").toggle("slow");
});

$(document).on('slidestop', '#slider-2', function() {

var style;
    var font = $(this).val();
  
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('#realTimeContents').addClass('font');
    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
        $('#realTimeContents').addClass('font');
    }
});