Header Centered

<!-- This example requires Tailwind CSS v2.0+ -->
<div id="banner" class="bg-indigo-600">
    <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">
                <p class="ml-3 font-medium text-white truncate sm:text-center w-full">
                    <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>
                    <a href="#" class="block sm:inline sm:pl-2 text-white underline">
                        Learn more →
                    </a>
                </p>
            </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>