JSFiddle - React, Tailwind, and code Playground

by Leslie Chan

HTML

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
	<title>Your New Application</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
	<style type="text/css">
		/* Prevent copy paste for all elements except text fields */
		*  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
		input, textarea  { -webkit-user-select:text; }
		body { background-color:white; color:black }
	</style>
        <link rel="stylesheet" type="text/css" href="http://mywaiter.my/css/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="http://mywaiter.my/css/custom.css">
</head>
<body>
	<!-- content goes here-->
    <!-- Start of first page -->
    <div data-role="page" id="foo">
        
        <div data-role="header" data-position="fixed">
            <h1>Foo</h1>
        </div><!-- /header -->
        
        <div role="main" class="ui-content">
            <p>I'm first in the source order so I'm shown as the page.</p>
            <p>View internal page called <a href="#bar" data-transition="slide">bar</a></p>
        </div><!-- /content -->
        
        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    
    </div><!-- /page -->
    
    <!-- Start of second page -->
    <div data-role="page" id="bar">
        
        <div data-role="header" data-position="fixed">
            <h1>Bar</h1>
        </div><!-- /header -->
        
        <div role="main" class="ui-content">
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
            <p><a href="#foo" data-transition="slide" data-direction="reverse">Back to foo</a></p>
        </div><!-- /content -->
        
        <div data-role="footer"...

CSS

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;  
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}