Diseñar una sección destacada en una página home de blog con Tailwind CSS te permite combinar tipografía, color y posicionamiento absoluto para resaltar contenido sin escribir CSS personalizado. Aquí trabajarás la estructura semántica y las clases utilitarias que dan forma a un bloque visual atractivo encima del listado de publicaciones.

¿Cómo estructurar el bloque destacado en HTML?

La base es un contenedor con etiquetas semánticas que comunican jerarquía al navegador y a los motores de búsqueda. Dentro del bloque destacado se incluyen cuatro elementos esenciales que aparecen en [0:30].

• Un span con la categoría, en este caso programación.
• Un h1 con la palabra blog como título principal.
• Un párrafo descriptivo: proyecto de desarrollo web para profesionales.
• Una img que apunta a la carpeta dev con la imagen del mismo nombre.

Esta estructura define qué ve el usuario antes de aplicar estilos. El h1 ancla el SEO de la página y el span funciona como etiqueta visual de categoría.

¿Para qué sirve un h1 en una página home? Es el título principal del documento. Indica al navegador y a buscadores cuál es el tema central, y solo debe haber uno por página.

¿Qué clases de Tailwind aplicar al contenedor destacado?

El contenedor recibe estilos que lo separan visualmente del resto de la página. Desde [1:05] se asignan las siguientes utilidades.

• Fondo gris para diferenciarlo del listado.
• Padding horizontal de 20 píxeles y vertical de 16 píxeles.
• Esquinas redondeadas con rounded.
• Margen inferior de nivel 8 para separar del siguiente bloque.

Con eso el bloque queda contenido, espaciado y listo para recibir los elementos internos.

¿Cómo se estiliza el span de categoría?

El span que dice programación se convierte en una etiqueta tipo pill. Las clases aplicadas en [1:35] son texto pequeño, mayúsculas, color gris nivel 700, fondo gris nivel 400, rounded-full y padding horizontal de nivel 2 con vertical de nivel 1.

Esa combinación produce una cápsula compacta que comunica categoría sin competir con el título.

¿Qué clases recibe el h1 y el párrafo descriptivo?

El h1 lleva text-3xl, color blanco y margen superior de nivel 4. El párrafo siguiente usa texto mediano, color gris nivel 400 y margen superior de nivel 2.

Esta jerarquía tipográfica ordena la lectura: primero la categoría, luego el título, después la descripción.

¿Cómo posicionar la imagen con absolute y relative en Tailwind?

El truco visual del bloque está en sacar parcialmente la imagen del contenedor. Para lograrlo necesitas combinar dos posicionamientos en [2:35].

• El contenedor padre recibe la clase relative.
• La imagen recibe absolute para anclarse al contenedor.
• Se usan utilidades de posición right e bottom para empujarla a la esquina.

Cuando los valores positivos no logran que la imagen sobresalga, se aplica el signo negativo en la clase. Ese signo es el que permite que el elemento literalmente salga del contenedor.

¿Cómo hago que un elemento se salga de su contenedor en Tailwind? Usa absolute en el hijo, relative en el padre y valores negativos como -right-4 o -bottom-4 en las utilidades de posición.

¿Cómo controlar el desbordamiento con overflow y opacity?

Una vez que la imagen sobresale, parte de ella se ve fuera del bloque destacado. Para limpiar esa visual se aplica overflow-hidden al contenedor, lo que recorta cualquier contenido que escape de sus límites.

Además, la imagen recibe una clase de opacidad que la integra al fondo sin robarle protagonismo al título. El resultado es un bloque con profundidad visual y foco en el texto.

¿Qué hace overflow-hidden? Oculta cualquier contenido que se salga del contenedor. Es útil cuando posicionas elementos absolutos con valores negativos y no quieres que se vean fuera del bloque.

¿Qué habilidades practicas con este ejercicio?

Este flujo de trabajo te entrena en varias áreas clave del desarrollo front-end.

• Maquetación semántica con HTML: uso correcto de h1, span, p e img.
• Tailwind CSS utility-first: aplicar estilos sin escribir reglas personalizadas.
• Posicionamiento CSS: dominio de absolute, relative y valores negativos.
• Jerarquía visual: combinar tamaños, colores y espaciados para guiar la lectura.

Con estos elementos resueltos, la siguiente clase aborda el diseño de la publicación individual dentro del listado. ¿Cuál de estas clases de Tailwind te resultó más útil para tus propios proyectos? Cuéntalo en los comentarios.