Construir el footer de una landing page con Tailwind CSS es uno de los pasos más rápidos y satisfactorios al cerrar un proyecto. Aquí aprenderás a estructurarlo, aplicar utilidades de Tailwind y dejarlo listo para producción, ideal si estás desarrollando tu primera web responsive.

¿Qué incluye el footer de Platzi Travel?

Antes de tocar código, conviene revisar el diseño en Figma para entender qué información va dentro. En el caso de Platzi Travel, el footer es minimalista y se mantiene idéntico entre la versión móvil y la versión web.

Los elementos que componen esta sección son:

• Un título destacado con la palabra About.
• Enlaces secundarios como Investors, Jobs y Terms and conditions.
• Una línea final con el nombre legal Platzi Travel.inc.

¿Para qué sirve un footer en una página web? Es la sección inferior que agrupa información corporativa, enlaces legales y datos de contacto. Ayuda a la navegación secundaria y aporta credibilidad a la marca.

¿Cómo estructurar el footer con clases de Tailwind?

Dentro de la etiqueta <footer> se inicia con la palabra clave class para activar las utilidades de Tailwind. La idea es que el contenedor ocupe todo el ancho disponible y se adapte en alto según su contenido [03:18].

Las clases base que se aplican al contenedor son:

• w-full para una anchura completa.
• h-auto para que la altura dependa de los elementos internos.
• bg-gray-50 como fondo suave en tono gris claro.
• p-6 para dar un padding uniforme alrededor.

Dentro del footer se agrega una etiqueta <p> con el texto About. Para que destaque visualmente sobre el resto, se le asigna la clase text-lg, logrando un tamaño grande y jerárquico.

¿Cómo duplicar elementos rápido en VS Code?

Un truco práctico mientras escribes los enlaces del footer es usar el atajo Alt + clic para colocar varios cursores en distintas líneas. Así puedes editar todos los <p> al mismo tiempo y aplicarles la misma clase sin repetir el proceso uno por uno.

Para los enlaces secundarios se usan estas utilidades:

• text-sm para un tamaño pequeño.
• text-gray-300 para un color tenue que no compita con el título.

¿Cómo dar espaciado vertical entre los textos del footer?

Un footer sin espaciado se ve apretado y poco legible. Por eso, al contenedor que envuelve el bloque About se le aplica space-y-2, una utilidad de Tailwind que añade separación en el eje Y entre los elementos hijos [04:30].

El resultado es un footer ordenado, con respiración entre cada línea y un padding general de p-6 que evita que el contenido choque con los bordes.

¿Qué hace la clase space-y-2 en Tailwind? Aplica un margen vertical automático entre elementos hermanos dentro de un contenedor. El número indica la cantidad de espacio en la escala de Tailwind.

¿Cómo personalizar el footer para tu propia marca?

Una vez que tienes la estructura base, el footer se vuelve un lienzo flexible. Puedes reemplazar los enlaces de Platzi Travel por los datos que tengan sentido para tu proyecto: redes sociales, políticas de privacidad, información de contacto o incluso un newsletter.

Algunas ideas para enriquecerlo:

• Añadir iconos de redes sociales con una librería como Heroicons.
• Incluir un bloque de copyright dinámico con el año actual.
• Sumar columnas adicionales para sitios con más navegación.

Con esto cierras casi por completo tu landing page. En la siguiente clase trabajarás la task bar, el último componente para dar por terminado el proyecto. ¿Cómo vas a personalizar tu footer? Cuéntalo en los comentarios.