JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="home">
    <div data-position="fixed" data-role="header" data-theme="d">
        
<h1>Prva pomoć</h1>

        <button data-icon="info" data-iconpos="right"></button>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-divider-theme="d">
            <li data-role="list-divider">Ne reagira i ne diše</li>
            <li><a href="#page2">Oživljavanje</a>

            </li>
            <li><a href="#page3">Oživljavanje + AVD</a>

            </li>
            <li data-role="list-divider">Ne reagira, ali diše</li>
            <li><a href="#page4">Bočni položaj</a>

            </li>
            <li data-role="list-divider">Ostalo</li>
            <li><a href="#page4">Gušenje</a>

            </li>
        </ul>
        <div id="popspot"></div>
        <div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
            <p>U slučaju hitnoće koristi ovaj izbornik!</p>
        </div>
    </div>
    <div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
        <div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
            <ul>
                <li><a href="#popup" data-rel="popup" id="chat" data-icon="custom">Zovi Hitnu</a>

                </li>
                <li><a href="#" id="email" data-icon="custom">Oživljavanje</a>

                </li>
                <li><a href="#" id="skull" data-icon="custom">Osobni podaci</a>

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

JavaScript

$(document).on('pageshow', '#home', function (event) {
    if (localStorage.popUpShown != 'true') {
        $('#popup').popup('open', {positionTo: 'window'});
     
        localStorage.popUpShown = 'true';
        setTimeout(function () {
            $("#popup").popup("close");
        }, 3000);
    }
    else{
        alert('already shown the popup');
    }

});