Trinchera WP
Regresar al curso Acceder Registrarse
Para acceder a este contenido:
Página de Curso Gratuito
Precios

¡Obtén acceso a todos los cursos!

99
Acceso a todo

Vamos a estructurar y diseñar esta sección paso a paso.

1. Introducción

En esta sección, vamos a crear un banner con precios que incluye:

  • Un fondo blanco.
  • Un contenedor con tres columnas.
  • Elementos estilizados como títulos, íconos, listas y botones.

Empezaremos con la estructura básica y luego avanzaremos hasta resolver problemas comunes en el diseño.


2. Estructura Básica del Banner

  1. Definimos el contenedor principal:

    • Un div con fondo blanco y un container centrado.
    • Dentro del contenedor, usaremos grid con tres columnas: grid-cols-3 y un gap-12.
  2. Primera columna:

    • Título con clase: text-3xl font-semibold.
    • Elementos de lista con íconos y texto.
  3. Segunda columna:

    • Repetimos la estructura, pero modificamos el contenido para los cursos de pago.

3. Estilos y Configuración Detallada

Estilizando los elementos principales:

  • Títulos:
    text-3xl font-semibold
    
  • Contenedores con bordes y fondo blanco:
    border border-gray-300 p-4 bg-white flex items-start gap-6
    
  • Íconos:
    text-green-500 text-lg font-semibold
    
  • Botón:
    border border-primary p-4 font-semibold hover:bg-primary-200
    

Problemas y soluciones:

  1. Alineación vertical:
    • Usar items-start para alinear el contenido al inicio.
  2. Espaciado inconsistente en listas:
    • Aplicar space-y-4 entre elementos de lista.
  3. Tamaños desiguales en columnas:
    • Usar col-span para asignar diferentes anchos:
      col-span-4 (para la primera columna)
      col-span-3 (para las demás)
      
  4. Íconos desalineados:
    • Solución: flex-none en todos los elementos con íconos para mantener tamaños consistentes.

4. Refinamiento y Detalles Finales

  1. Ajustamos el botón para que sea más pequeño:
    py-3 px-6
    
  2. Verificamos la fuente para mantener consistencia visual con el resto del diseño.
  3. Nos aseguramos de que los márgenes y padding sean adecuados en todos los elementos.
  4. Revisamos el diseño responsivo:
    • Probamos diferentes tamaños de pantalla para asegurarnos de que todo esté alineado correctamente.

5. Resumen

En esta clase, hemos:

  • Creado un banner de precios con columnas y listas.
  • Aplicado estilos usando Tailwind CSS.
  • Solucionado problemas comunes como la alineación, espaciado y tamaños desiguales.

El resultado es un diseño funcional y atractivo que se adapta bien a diferentes dispositivos.