Tailwind CSS Dashboard Footers Blocks

Dashboard Footers

Compact dashboard footers with utility links, secondary navigation, and modal access for admin and product shells.

Footer row with utility links on one side and a keyboard-shortcuts trigger on the other.

<main id="content" class="lg:ps-65">
                        <div class="p-2 sm:p-5 sm:py-0 md:pt-5 space-y-5">
                          
                          <div class="p-4 flex flex-col justify-center h-72 md:h-96 min-h-[calc(100vh-56px)] sm:min-h-[calc(100vh-84px)] bg-layer border border-layer-line shadow-2xs rounded-xl">
                            <div class="relative h-full border border-dashed border-black/10 dark:border-white/10 rounded-xl overflow-hidden">
                              <div class="absolute inset-0 size-full">
                                <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-size-[10px_10px] size-full"></div>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                      </main>

<footer class="lg:ps-65 h-10 sm:h-16 absolute bottom-0 inset-x-0">
                        <div class="p-2 sm:p-5 flex justify-between items-center">
                          <p class="text-xs sm:text-sm text-muted-foreground-1">
                            © 2026 Preline Labs.
                          </p>

<ul>
                            <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                              <a class="hover:text-primary-hover focus:outline-hidden focus:underline" href="#">
                                FAQ
                              </a>
                            </li>
                            <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                              <a class="hover:text-primary-hover focus:outline-hidden focus:underline" href="#">
                                License
                              </a>
                            </li>
                            <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle sm:leading-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                              <button type="button" class="hover:text-primary-hover focus:outline-hidden focus:underline" data-hs-overlay="#hs-pro-dfkm">
                                <svg class="shrink-0 size-3.5 sm:size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
                              </button>
                            </li>
                          </ul>
                          
                        </div>
                      </footer>

<div id="hs-pro-dfkm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-label="Keyboard shortcuts">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                      <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <div class="py-2 px-4 border-b border-overlay-divider">
                          <div class="relative">
                            <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20">
                              <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </div>
                            <input type="text" class="py-1.5 sm:py-2 ps-7 pe-20 block w-full bg-layer border-transparent rounded-t-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search keyboard or shortcuts">
                            <div class="absolute inset-y-0 inset-e-0 flex items-center pointer-events-none z-20">
                              <span class="min-h-7.5 inline-flex justify-center items-center py-0.5 px-1.5 bg-layer border border-layer-line font-mono text-sm text-layer-foreground rounded-md">
                                Cmd + K
                              </span>
                            </div>
                          </div>
                        </div>

<div class="h-137.5 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-4 space-y-5">
                            <div>
                              <h2 class="text-foreground font-semibold mb-2.5">
                                Formatting
                              </h2>

<ul>
                                <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span class="font-bold">
                                    Bold
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Ctrl
                                    </span>
                                    +
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      b
                                    </span>
                                  </div>
                                </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span class="italic">
                                    Italic
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Ctrl
                                    </span>
                                    +
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      i
                                    </span>
                                  </div>
                                </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span class="underline underline-offset-4">
                                    Underline
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Ctrl
                                    </span>
                                    +
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      u
                                    </span>
                                  </div>
                                </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span class="line-through">
                                    Strikethrough
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Ctrl
                                    </span>
                                    +
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Alt
                                    </span>
                                    +
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      u
                                    </span>
                                  </div>
                                </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span class="text-sm">
                                    Small text
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Ctrl
                                    </span>
                                    +
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      s
                                    </span>
                                  </div>
                                </li>
                              </ul>
                              
                            </div>

<div>
                              <h2 class="text-foreground font-semibold mb-2.5">
                                Insert
                              </h2>

<ul>
                                <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span>
                                    Mention person
                                    <a class="font-semibold text-sm text-primary decoration-2 hover:underline focus:underline" href="#">
                                      (@Brian)
                                    </a>
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      @
                                    </span>
                                  </div>
                                </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span>
                                    Link to doc
                                    <a class="font-semibold text-sm text-primary decoration-2 hover:underline focus:underline" href="#">
                                      (+Meeting notes)
                                    </a>
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      +
                                    </span>
                                  </div>
                                </li>
              
                                <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span class="font-semibold">
                                    #hashtag
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      #hashtag
                                    </span>
                                  </div>
                                </li>
              
                                <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span>
                                    Date
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      /date
                                    </span>
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Space
                                    </span>
                                  </div>
                                </li>
              
                                <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span>
                                    Time
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      /date
                                    </span>
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Space
                                    </span>
                                  </div>
                                </li>
              
                                <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                                  <span>
                                    Note box
                                  </span>
                                  <div class="flex gap-x-1">
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      /note red
                                    </span>
                                    <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                                      Enter
                                    </span>
                                  </div>
                                </li>
                              </ul>
                              
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>

Open related account billing page

Dashboard Footers

Dashboard Footer with Utility Links and Shortcuts Pro