En esta sección, configuramos Tailwind CSS para comenzar a trabajar en la recreación de la interfaz de Airbnb. Antes de empezar con el desarrollo visual, es fundamental establecer la estructura básica de estilos y definir las fuentes y colores de la marca.

Organización de la estructura

La página de Airbnb consta de varias secciones clave:

• Top bar
• Encabezado (Header)
• Filtros de búsqueda
• Listado de alojamientos
• Inspiración para escapadas futuras
• Pie de página (Footer)

Para facilitar la implementación, comenzaremos con la versión responsive, siguiendo la estrategia Mobile First, es decir:

1. Diseñar para dispositivos móviles.
2. Adaptar progresivamente a tabletas.
3. Finalmente, ajustar para pantallas de escritorio.

Configuración de Tailwind CSS

La configuración de Tailwind se ha preparado de la siguiente manera:

• Se ha instalado y configurado Tailwind CSS.
• Se han añadido las fuentes y colores personalizados utilizados en la interfaz de Airbnb.
• Se han definido estilos base como tipografías y colores principales.

Colores de Airbnb

Para asegurar la coherencia visual con Airbnb, se han identificado los colores principales mediante inspección de la página y herramientas de extracción de color. Se han definido los siguientes valores:

• Rojo principal: #FF5A5F
• Rojo alternativo: #FF385C
• Gris claro: #767676
• Gris oscuro: #484848

Estos valores han sido incorporados en la configuración de Tailwind.

Tipografía

La fuente utilizada en la interfaz de Airbnb es Circular, pero dado que no está disponible en Google Fonts, se ha optado por Nunito, que ofrece una apariencia similar y se puede integrar fácilmente.

Implementación de la selección de ocupantes

Uno de los elementos clave en la interfaz es la selección del número de ocupantes. Esta sección permite definir la cantidad de adultos, niños y bebés que participarán en la reserva.

• Se han añadido etiquetas diferenciadas para adultos, niños (de 2 a 12 años) y bebés (menores de 2 años).
• Se ha estructurado el diseño con flexbox para alinear los elementos de forma adecuada.
• Se han aplicado estilos a los botones de incremento y decremento para mejorar la experiencia visual y la usabilidad.
• Se ha incorporado una opción para mascotas, con una indicación clara sobre la posibilidad de viajar con un animal de asistencia.

Preparación de la estructura base

En esta fase, la estructura HTML ha sido configurada con los estilos globales y Tailwind CSS ya está listo para ser utilizado. También se han añadido fuentes de Google y configuraciones básicas para garantizar una correcta implementación en futuras secciones.

En la próxima clase, continuaremos con la implementación del sistema de selección, asegurando que los elementos sean dinámicos y se actualicen correctamente según las interacciones del usuario.