Construir una sección home atractiva con Tailwind CSS implica combinar una imagen de fondo, un search bar funcional y un botón llamativo dentro de una estructura responsive. Aquí aprenderás a montar esa sección paso a paso usando flexbox, posicionamiento absoluto y utilidades como rounded-full, shadow y padding para lograr un diseño limpio.

¿Cómo estructurar el contenedor principal de la sección home?

El punto de partida es definir un contenedor con dimensiones completas que sirva como lienzo para todos los elementos.

En tu sección de home agregas una clase con w-full y h-screen para que ocupe todo el alto de la pantalla. Dentro colocas un primer div con w-full y h-3/4, recordando que para trabajar tamaños proporcionales en Tailwind necesitas la diagonal (/). Esa diagonal es la que convierte el valor en una fracción legible para el framework [01:05].

¿Cómo defino tamaños proporcionales en Tailwind? Usa la diagonal entre números, como h-3/4 o w-1/2. Sin esa diagonal el valor no se interpreta como fracción.

Dentro de ese contenedor añades otro div con w-full y h-full para alojar la imagen de fondo. La imagen la importas desde el directorio image, en este caso la de San Francisco, que aparece de inmediato en pantalla.

¿Cómo superponer el search bar y el botón sobre la imagen?

La clave para que los elementos floten encima de la imagen está en flexbox combinado con position absolute.

Creas un nuevo div que contenga el input de tipo search y el button con el texto "explorar". A ese contenedor le aplicas estas clases:

• w-full y h-full para que cubra el área de la imagen.
• flex y flex-col para apilar los elementos en columna.
• absolute para posicionarlo sobre la imagen.
• space-y-96 para separar verticalmente input y botón.
• p-4 e items-center para centrar y dar respiración.

Un detalle importante: el div con los inputs debe ir después del div con la imagen en el orden del HTML. Si lo dejas antes, el posicionamiento absoluto no se comporta como esperas y los botones quedan ocultos [04:30].

¿Por qué necesito position absolute aquí?

Porque la imagen ocupa todo el espacio del contenedor padre. Sin absolute, el bloque de inputs se renderiza debajo de la imagen en lugar de superponerse. El absolute lo saca del flujo normal y lo coloca encima.

¿Cómo darle estilo al input y al botón con Tailwind?

Aquí viene la parte donde el diseño toma forma. Cada elemento recibe utilidades específicas para verse como una interfaz moderna.

Para el input aplicas:

• p-3 para un padding cómodo.
• rounded-full para conseguir forma de cápsula. La propiedad border-radius en Tailwind se llama rounded, y full la lleva al máximo redondeo.
• shadow-sm para una sombra discreta que aporte profundidad.
• Atributo placeholder="San Francisco" directamente en el HTML, no como clase.

¿Qué hace rounded-full en Tailwind? Aplica el border-radius máximo, transformando cualquier elemento en una cápsula o círculo. Es ideal para search bars y botones tipo pill.

Para el button con el texto "explorar" usas:

• bg-white para el fondo blanco.
• text-principal (o el nombre que hayas configurado en tailwind.config) para el color personalizado.
• font-semibold para darle peso al texto.
• p-4 y w-32 para que tenga el ancho adecuado. Probaste con w-12 y w-20, pero quedaban demasiado pequeños frente al tamaño del texto.
• rounded-full para que combine con el input.
• shadow-sm para resaltar.

¿Por qué mi color personalizado no se aplica?

Si configuraste un color en tailwind.config.js y no lo toma, revisa el nombre exacto. En este caso el color estaba registrado como primary, no como principal. Tailwind distingue mayúsculas, minúsculas y nombres exactos, así que un typo rompe la utilidad [09:45].

¿Cómo uso colores personalizados en Tailwind? Defínelos en tailwind.config.js dentro de theme.extend.colors y úsalos con el prefijo correspondiente, como text-primary o bg-primary. El nombre debe coincidir exactamente.

¿Qué utilidades de Tailwind son clave en esta sección?

Durante la construcción aparecen varias utilidades que vale la pena tener claras:

• w-full / h-full: ancho y alto al 100% del contenedor padre.
• h-screen: alto igual al viewport completo.
• flex-col: organiza hijos en columna vertical.
• space-y-96: espacio vertical entre elementos hermanos dentro de un flex.
• rounded-full: border-radius máximo para forma de cápsula.
• shadow-sm: sombra ligera para dar profundidad.
• text-2xl / text-lg: tamaños tipográficos predefinidos.

Con estas piezas la sección home queda lista: imagen de fondo, search bar tipo cápsula con placeholder de San Francisco y botón blanco de "explorar" superpuestos. ¿Tu botón te quedó muy pequeño o muy grande? Cuéntame en los comentarios qué ancho terminaste usando y cómo resolviste el orden de los div para el posicionamiento absoluto.