footer.html

<div class="w-full h-screen">
    <!-- <section id="bottom-navigation" class="md:hidden block fixed inset-x-0 bottom-0 z-10 bg-white shadow"> // if shown only tablet/mobile-->
    <section id="bottom-navigation" class="block fixed inset-x-0 bottom-0 z-10 bg-white shadow">
        <div id="tabs" class="flex justify-between">
            <a href="/generate.html#library"
               class="w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-center pt-2 pb-1">
                <span class="material-icons" style="font-size: 24px;">history</span>
                <span class="tab tab-home block text-xs">My Passes</span>
            </a>
            <a href="/generate.html"
               class="w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-center pt-2 pb-1">
                <span class="material-icons" style="font-size: 24px;">add</span>
                <span class="tab tab-explore block text-xs">Create</span>
            </a>
            <a href="/"
               class="w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-center pt-2 pb-1">
                <span class="material-icons" style="font-size: 24px;">qr_code_scanner</span>
                <span class="tab tab-home block text-xs">Scan</span>
            </a>
        </div>
    </section>
</div>