JSFiddle - React, Tailwind, and code Playground

by sgliser

HTML

<!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Multi page template</title> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head> 

<body> 

<div data-role="dialog" id="logon"> 
    <form action="#index" method="post">
        <div data-role="header">
            <h1>Login</h1>
        </div><!-- /header -->

        <div data-role="content">    
            <p><input type="text" placeholder="username" /></p>
            <p><input type="password" placeholder="password"></p>
            <p><input id="fakeLoginButton" type="button" value="go" onclick="fakeTheLogin()"></p>
        </div><!-- /content -->
        
    </form>
</div><!-- /page -->

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

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

    <div id="indexContent" data-role="content" class="unauthenticated">    
        <p>Welcome back, [whoever you are]</p>
        <p>Latest news: Blah blah blah.</p>
        <p class="content"><a href="#content">Content Page</a></p>
        <p class="login"><a href="#logon">Login to view the latest</a></p>
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Footer content</h4>
    </div><!-- /footer -->
    
</div><!-- /page -->

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

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

    <div data-role="content">    
        <p>All your base are belong to us!</p>
        <p>This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>        
        <p>Just view the source and...

CSS

.unauthenticated .content{display:none;}
.authenticated .login{display:none;}