JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>This is the title of the mobile app</title>   
        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />  
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>  
    </head>  
    
    <body>  
        <div data-role="page">  
            <header data-role="header" class="ui-bar">   
                <h1> HEADER </h1>
                <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
                <div id="top" data-role="navbar" data-type="horizontal">
                    <ul>
                        <li><a href="#A">A</a></li>             
                        <li><a href="#B">B</a></li>
                        <li><a href="#C">C</a></li>
                        <li><a href="#D">D</a></li>
                    </ul>
                </div>
            </header>   
            
            <div data-role="content" id="middle">   
                <strong>Content</strong> Is <i>Here</i>
            </div>  
            
            <footer data-role="footer" data-position="fixed">  
                <h1> Copyright (C) by me </h1>
            </footer>  
        </div>  
        <script language="javascript">
            $('div[id="top"] ul li a').live("click", function(e) {
            e.stopImmediatePropagation();
            e.preventDefault();
            var html = $(this).html();
            var content = $('div[id="middle"]');
            $(content).html(html);
            });
        </script>
    </body>  
</html>