Sticky footer

Tailwind CSS Sticky footer

A sticky footer is a component that is pinned to the bottom of the viewport in desktop browsers. It stays visible when the user scrolls the page up or down.

Basic example

If you want to put the footer at the bottom of the viewport in the desktop browsers, add the .sticky and .bottom-0 classes to the nav element.

Scroll down

Scroll up

HTML

        
            
        <footer class="... sticky bottom-0">...</footer>

Sticky footer

Tailwind CSS Sticky footer

Basic example

Access restricted

To view this section you must have an active PRO account

Sticky footer

Tailwind CSS Sticky footer

Basic example

Related resources