Sticky Footer

<!-- This example requires Tailwind CSS v2.0+ -->
<div id="banner" class="bg-indigo-600 absolute bottom-0 left-0 right-0">
    <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between flex-wrap">
            <div class="w-0 flex-1 flex items-center">
                <span class="flex p-2 rounded-lg bg-indigo-800">
                    <!-- Heroicon name: speakerphone -->
                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                    </svg>
                </span>
                <p class="ml-3 font-medium text-white truncate">
                    <span class="md:hidden">
                        We announced a new product!
                    </span>
                    <span class="hidden md:inline">
                        Big news! We're excited to announce a brand new product.
                    </span>
                </p>
            </div>
            <div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
                <a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50">
                    Learn more
                </a>
            </div>
            <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
                <button id="dismiss" type="button" class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
                    <span class="sr-only">Dismiss</span>
                    <!-- Heroicon name: x -->
                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- placeholder for link to clear sessionStorage -->
<div class="p-4 text-center text-gray-400 mt-12 text-xs cursor-pointer max-w-xl mx-auto">
    <p>Dismissing the banner will save state to sessionStorage. This will remember the state until the session (tab is
        closed). Opening the same page in a new tab is considered a new session</p>
    <p id="clearSessionStorage" class="clear underline mt-2">Clear Session Storage</p>
</div>

<script>
    // Script to handle dismiss button and store state for duration of session (until browser closed)
    // Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
    // identify the banner and save to a variable
    let banner = document.querySelector('#banner');
    // identify the dismiss button and save to a variable
    let dismissButton = document.querySelector('#dismiss');
    // get the value of sessionStorage for 'dismissBanner' (defaults to null)
    let dismissBanner = sessionStorage.getItem('dismissBanner');
    // on page load, hide banner if previously dismissed in same session
    if (dismissBanner === '1') {
        banner.classList.add('hidden');
    }
    // add event listener to dismissButton
    dismissButton.addEventListener('click', () => {
        // hide banner
        banner.classList.add('hidden');
        // Save state to sessionStorage
        sessionStorage.setItem('dismissBanner', '1');
    })
    // the following is just for demonstration purposes, to manually clear the sessionStorage
    // identify the link to clear the sessionStorage
    let clearSessionStorage = document.querySelector('#clearSessionStorage');
    // add event listener to the link, which on click will remove the dismissBanner for from sessionStorage and restore the banner
    clearSessionStorage.addEventListener('click', () => {
        sessionStorage.removeItem('dismissBanner');
        banner.classList.remove('hidden');
    })
</script>