JGuang
中

Footer

Footer · daisyUI

Preview
npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47

Footer

Organize link groups and supporting information with clear headings and valid destinations. Reflow horizontal layouts on narrow screens rather than clipping translated text with fixed heights.

Installation and initialization

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47

This is a native CSS plugin, not a React component import. Build Tailwind 4 with the daisyUI plugin and load the generated stylesheet before copying an example. See the included setup guide; do not override an existing project's React or Tailwind versions blindly.

@import "tailwindcss";
@plugin "daisyui" { themes: light --default, dark --prefersdark; }

Source and executable behavior

Source files preserve the original code fences, including original comments and demo strings. The $$ class prefix placeholder must be resolved for your plugin configuration: without a prefix, $$btn becomes btn. Copy every listed source file for the chosen example, combine HTML/CSS/JS appropriately and implement native events. The preview's reviewed event adapters are not a backend or an automatically installed application runtime.

Complete first example

<footer class="$$footer sm:$$footer-horizontal bg-neutral text-neutral-content p-10">
  <nav>
    <h6 class="$$footer-title">Services</h6>
    <a class="$$link $$link-hover">Branding</a>
    <a class="$$link $$link-hover">Design</a>
    <a class="$$link $$link-hover">Marketing</a>
    <a class="$$link $$link-hover">Advertisement</a>
  </nav>
  <nav>
    <h6 class="$$footer-title">Company</h6>
    <a class="$$link $$link-hover">About us</a>
    <a class="$$link $$link-hover">Contact</a>
    <a class="$$link $$link-hover">Jobs</a>
    <a class="$$link $$link-hover">Press kit</a>
  </nav>
  <nav>
    <h6 class="$$footer-title">Legal</h6>
    <a class="$$link $$link-hover">Terms of use</a>
    <a class="$$link $$link-hover">Privacy policy</a>
    <a class="$$link $$link-hover">Cookie policy</a>
  </nav>
</footer>

All runnable examples

footer-1

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-0.html

footer-2

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-1.html

footer-3

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-2.html

footer-4

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-3.html

Footer with copyright text

footer-5

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-4.html

Footer with copyright text and social icons

footer-6

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-5.html

footer-7

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-6.html

footer-8

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-7.html

footer-9

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-8.html

footer-10

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-9.html

footer-11

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/footer/block-10.html

Theme, accessibility and verification

Use native data-theme boundaries. Verify keyboard operation, labels, visible focus, disabled/invalid states where applicable, light/dark, mobile and reduced motion. Check your target browser's dialog, popover and CSS feature support. CSS classes do not supply unimplemented JavaScript or business services. Clean up timers and third-party instances; copying a command is not installation success.

Source and license

https://github.com/saadeghi/daisyui/tree/c51f50130ffefb293179e6fce8de7ad3f307e45f

JGuang authors these bilingual practical notes; this is not a claim of translating the complete upstream documentation. Original Markdown, code and CSS remain available in the source viewer. Preserve MIT and separate dependency notices. All native-package notices are included conservatively, including build tools; no build binary or remote demo image is redistributed. Replace remote media with assets you are authorized to use. Commercial templates are outside this integration.