JSFiddle - React, Tailwind, and code Playground

by Peter Scott

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div id="header" data-role="header">
    <h1>My Photos</h1>
</div>

<article data-role="content">
    <ul data-role="listview" data-filter="true">
        <li>
            <a href="#">
            <h1>Miniature Doberman Pincher</h1>
            
            <p>This is what happens when a
            friend brings a dog to the studio.</p>
            </a>
        </li>
        <li>
            <a href="#">
            <h1>Gummy Bears</h1>
            
            <p>Three different poster boards...mirror for reflection,
            black for background white for highlights</p>
            </a>
        </li>
    </ul>


</article>

<footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Info</a></li>
        </ul>
    </nav>
</footer>
</div>