JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page" id="mainMenu">
    <div data-role="header"></div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" style="margin-top:50%; margin-left:20%;">
            <li id="prayerId" data-theme="b"><a href="#"><img
                                                src="css/images/namazimage.jpg" />PRAYERS </a>

            </li>
            <li id="goalId" data-theme="e"><a href="#"><img
                                                src="css/images/namazimage.jpg" />GOAL </a>

            </li>
        </ul>
    </div>
</div>
<!-- //////////////////////// PRAYER PAGE START ////////////////////////////////////// -->
<div data-role="page" id="prayer">
    <div data-role="header" data-theme="b"></div>
    <div data-role="content"></div>
    <div data-role="footer" data-theme="e" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li id="namazId"><a href="#" data-role="tab" data-icon="grid">NAMAZ</a>

                </li>
                <li id="fastId"><a href="#" data-role="tab" data-icon="grid">FAST</a>

                </li>
            </ul>
        </div>
    </div>
</div>

JavaScript

$('#prayerId').off('click').on('click', function () {
    alert("prayer id");
    $.mobile.changePage("#prayer", null, true, true);
});

$('#namazId').off('click').on('click', function () {
    alert("namaz page");
    $.mobile.changePage('#namazPage', null, true, true);
});