JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<div data-role="page" >
        <div data-role="header" data-position="fixed">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
            <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
        </div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <a data-role="button" href="http://www.google.com" target="_blank" >MyLink1</a>
            <a data-role="button" href="http://www.google.com" target="_blank" >MyLink2</a>
        </div>
    </div>

JavaScript

$('[data-role="page"].ui-page-active').on('focus', 'input', function() {
    $('[data-role="page"].ui-page-active').find('[data-role="footer"]').hide();
});

$('[data-role="page"].ui-page-active').on('blur', 'input', function() {
    $('[data-role="page"].ui-page-active').find('[data-role="footer"]').show();
});