Pie de página CSS de Tailwind solo para CSS con diseño de varias columnas, logotipo, enlaces y espacios para derechos de autor. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4.
Los componentes de pie de página organizan y presentan información de todo el sitio, como enlaces, derechos de autor y detalles de contacto en la parte inferior de las páginas. Construidos con HTML semántico, los pies de página mejoran la navegación y proporcionan metainformación importante. El sistema de pie de página de Frutjam admite múltiples diseños, direcciones y estilos, ideal para pies de página de sitios, pies de página de documentación y navegación inferior.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| footer | Base | Contenedor de pie de página con diseño de cuadrícula |
| footer-title | Modificador | Encabezado de sección dentro del pie de página |
| footer-horizontal | Modificador | Diseño horizontal de una sola fila |
| footer-vertical | Modificador | Diseño apilado verticalmente |
Uso básico
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <footer class="footer p-10 bg-neutral text-on-neutral"> <div> <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg> <p>Providing reliable tech since 1992</p> </div> <div> <span class="footer-title">Company</span> <a class="link link-hover">About us</a> <a class="link link-hover">Contact</a> <a class="link link-hover">Jobs</a> </div> <div> <span class="footer-title">Legal</span> <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> </div> </footer> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <footer className="footer p-10 bg-neutral text-on-neutral"> <div> <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg> <p>Providing reliable tech since 1992</p> </div> <div> <span className="footer-title">Company</span> <a className="link link-hover">About us</a> <a className="link link-hover">Contact</a> <a className="link link-hover">Jobs</a> </div> <div> <span className="footer-title">Legal</span> <a className="link link-hover">Terms of use</a> <a className="link link-hover">Privacy policy</a> <a className="link link-hover">Cookie policy</a> </div> </footer> |
Direcciones del pie de página
1 2 3 4 5 6 7 8 9 10 | <footer class="footer footer-center p-10 bg-base-200 text-on-base"> <div class="flex justify-center"> <a class="link link-hover">Company</a> <a class="link link-hover">About</a> <a class="link link-hover">Contact</a> </div> <div> <p>Copyright © 2024 - All rights reserved</p> </div> </footer> |
Pie de página con redes sociales
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <footer class="footer bg-neutral text-on-neutral p-10"> <div> <span class="footer-title">Services</span> <a class="link link-hover">Web Design</a> <a class="link link-hover">UI/UX</a> <a class="link link-hover">Development</a> </div> <div> <span class="footer-title">Company</span> <a class="link link-hover">About us</a> <a class="link link-hover">Contact</a> </div> <div> <span class="footer-title">Social</span> <div class="flex gap-3"> <a class="link">Twitter</a> <a class="link">GitHub</a> <a class="link">LinkedIn</a> </div> </div> </footer> |
¿Usando Claude Code, Cursor u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Pie de página según sea necesario. No más clases alucinadas.