Construir una sección de FAQs (frequently asked questions) en una landing page parece sencillo, pero requiere decisiones de layout que mantengan el orden visual. Aquí aprendes a estructurarla con Flexbox en columna y Tailwind CSS, replicando el diseño desde Figma hasta el código funcional.

¿Qué estructura HTML necesitas para una sección de FAQs?

La base parte de un contenedor principal identificado con un id, que envuelve el título de la sección y un segundo contenedor para las preguntas. Esa jerarquía facilita aplicar estilos globales sin romper el espaciado interno.

El div exterior recibe las clases width full y height full para ocupar el espacio disponible. Dentro va el título FAQs y, debajo, otro div que agrupa cada pregunta con su respuesta.

¿Por qué usar un id en la sección de FAQs? Porque permite enlazar directamente desde el menú de navegación o desde otros enlaces internos hacia esta sección específica de la página.

¿Cómo se aplica Flexbox en columna a las preguntas?

Cuando agregas dos o más preguntas, los elementos quedan apilados de forma natural, pero sin control de espaciado. Para resolverlo, sumas las clases flex y flex column al contenedor de preguntas, lo que activa el comportamiento de Flexbox sobre el eje vertical.

Luego añades space en el eje Y con valor de cuatro. Eso genera una separación uniforme entre cada bloque de pregunta y respuesta, manteniendo la lectura limpia.

¿Qué estilos aplicar al título y al contenido de cada pregunta?

El título principal de la sección comparte tamaño con los títulos de secciones previas: text 3XL, color primary y font semibold. Eso asegura coherencia visual en toda la landing.

Para cada pregunta individual, los estilos cambian según jerarquía:

• Título de la pregunta: text XL, font medium y color text primary.
• Descripción de la respuesta: text medium con padding top de dos para separarla del título.
• Margen superior del título principal: margin top de seis para evitar que quede pegado al bloque anterior.

Estos valores replican fielmente el diseño en Figma sin necesidad de CSS personalizado adicional.

¿Cómo se construye cada bloque de pregunta y respuesta?

Cada pregunta vive dentro de su propio div con dos etiquetas <p>: una para el título (por ejemplo, Política de cancelación) y otra para la descripción extraída del contenido del proyecto. Duplicar este patrón te permite escalar la sección con todas las preguntas frecuentes que necesites.

Un detalle práctico: aplicar padding X de seis al contenedor de preguntas crea márgenes laterales que evitan que el texto toque los bordes del viewport en pantallas pequeñas.

¿Qué hace la clase space-y-4 en Tailwind? Aplica un margen vertical automático entre los hijos directos de un contenedor flex, separándolos de forma uniforme sin tener que definir márgenes individuales.

¿Por qué Flexbox es la mejor opción para listas de FAQs?

Flexbox en dirección columna te da control sobre el espaciado, la alineación y el comportamiento responsive sin recurrir a margin-bottom manual en cada elemento. Eso reduce código repetido y mantiene consistencia.

Además, al usar utilidades de Tailwind como flex column y space-y, el resultado es declarativo: lees el HTML y entiendes el layout sin abrir el CSS.

Ahora te toca sumar todas las preguntas frecuentes que consideres relevantes para tu proyecto. ¿Qué preguntas crees que no pueden faltar en tu landing? Déjalo en los comentarios.