JSFiddle - React, Tailwind, and code Playground

by big_smile

HTML

<script src="http://dgtgroup.co.uk/misc/enquire.js"></script>
<body> 


<div id="tabs document">
  <div data-role="page">
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider heading">
                        Fruits
                    </li>
                    <li data-theme="c">
                        <a href="#apple" data-transition="slide">
                            Apple
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#orange" data-transition="slide">
                            Orange
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#pear" data-transition="slide">
                            Pear
                        </a>
                    </li>
                </ul>
            </div>
        </div>



<!-- Start of first page -->
<div data-role="page" id="Apple">

    <div data-role="header">
        <h1>Apple</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <h2>Apples are tasy</h2>
        <p>TThe apple is the pomaceous fruit of the apple tree, species Malus domestica in the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans.</P> 
        
        <p>Apples grow on small, deciduous trees. The tree originated in Western Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe, and were brought to North America by European colonists.</p> 
        <p>Apples have been present in the mythology and religions of many cultures, including Norse, Greek and Christian traditions. In 2010, the fruit's genome was decoded, leading to new understandings of disease control and...

JavaScript

$(document).ready(function() {
    
     divClone = $("#document").clone();
    
        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();  
$("#document").replaceWith(divClone);            
     $('head').append('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();
    
    
       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
           $("#document").replaceWith(divClone);
    $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();
            
    }).listen();

});