Maquetación de Galería de Productos con Tailwind CSS

Clase 34 de 71 • Curso de Angular: Creación de Aplicaciones Web

Brandon Lee Aguero Fernandez

student•

A continuación dejo los estilos que se usaron en clase para el componente 'product'.

<div class="group rounded-lg border">
    <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">
        <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
        <h3 class="text-sm text-gray-700">{{ title }}</h4>
        <p class="text-lg font-medium text-gray-900">{{price}}</p>
        <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
            (click)="addToCartHandler()">Add to cart</button>
    </div>
</div>

luis eduardo prado valer

student•

me boto un error pero fue por el h4, inicia un h3 pero cierra en h4, de todas maneras gracias por ahorrar el codigo :D

Creck Brayan Mauri Pastor Paredes

student•

gracias nos ahorraste tiempo se agradece

J Maycol Valencia

student•

Estructura del ComponentProduct usado en 2025:

<div class="group rounded-1g border">
    <a href="#" class="w-full overflow-hidden rounded-t-1g bg-gray-200">
      <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
      <h3 class="text-sm text-gray-700">{{ title }}</h4>
      <p class="text-lg font-medium text-gray-900">{{price}}</p>
      <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full hover:bg-gray-950 hover:text-white"
        (click)="addToCartHandler()">Add to cart</button>
    </div>
  </div>

J Maycol Valencia

student•

Por algun bug del bloque de codigo en los comentarios cambia la etiqueta de cierre del H3 por H4 , si alguien de soporte de Platzi puede ayudarnos 😉seria genial 🐱‍👤

Cristian Camilo García Gutiérrez

student•

Abri el recurso pero me dice esto: 404 - Page Not Found

Whoops! That page doesn’t exist. But do not fret, check out our other resources from below to get started.

Dario Bublitz

student••

📍Reutilización visual con datos dinámicos

Me llevo que, gracias a la reutilización de componentes y a datos dinámicos (como imágenes aleatorias), la galería se vuelve flexible y visualmente rica sin duplicar código.

Dario Bublitz

student••

📍El layout se controla desde el componente contenedor

Me llevo que el espaciado y la grilla pertenecen al componente List, no al Product, reforzando la idea de separación clara entre contenedor y elemento reutilizable.

Dario Bublitz

student••

📍El componente mantiene su responsabilidad única

Me llevo que el componente Product sigue teniendo una sola responsabilidad, incluso al mejorar el diseño: renderizar un producto, no decidir cómo se organiza la grilla completa.

Dario Bublitz

student••

📍Aprovechar librerías de componentes acelera el desarrollo

Me llevo la recomendación de usar sitios como Flowbite, donde ya existen maquetaciones listas para copiar y pegar, lo que ahorra mucho tiempo en proyectos reales.

Dario Bublitz

student••

📍Tailwind acelera la maquetación sin distraer del objetivo

Me llevo que Tailwind permite mejorar rápidamente la apariencia visual sin perder el foco en aprender Angular, usando utilidades listas en lugar de escribir CSS desde cero.

kevin diaz

student•

El link con los recursos no existe:

Jhonattan Halcon Casallas Felipe

student•

Me aparece un tema de hydration

, pero esto cuando pego el codigo propuesto por el profe, pero cuando pego el codigo del profe junto con el que estaba planteado inicialmente, no arroja error.

Andrés Eduardo Martinez Morgado

student•

Edite un poco el html del teacher, dejo aca el resultado

<div class="mt-6 w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 
dark:border-gray-700">
    <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">
        <img [src]="img" [alt]="title" class="h-full w-full object-cover rounded-lg object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
        <span class="text-lg text-white">{{ title }}</span>
        <div class="flex items-center justify-between">
            <span class="text-3xl font-bold text-gray-900 dark:text-white">${{price}}</span>
            <a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none 
                        focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 
                        dark:hover:bg-blue-700 dark:focus:ring-blue-800" (click)="addToCartHandler()">
                Add to cart
            </a>
        </div>
    </div>
</div>
```\<div class="mt-6 w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">    \<a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">        \<img \[src]="img" \[alt]="title" class="h-full w-full object-cover rounded-lg object-center group-hover:opacity-75">    \</a>    \<div class="flex flex-col space-y-2 p-4">        \<span class="text-lg text-white">{{ title }}\</span>        \<div class="flex items-center justify-between">            \<span class="text-3xl font-bold text-gray-900 dark:text-white">${{price}}\</span>            \<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none                         focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600                         dark:hover:bg-blue-700 dark:focus:ring-blue-800" (click)="addToCartHandler()">                Add to cart            \</a>        \</div>    \</div>\</div>

Luis Olave Carvajal

student•

ANGULAR 18 - correccion <div class="group rounded-lg border"> <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200"> <img [src]="img()" [alt]="title()" class="h-full w-full object-cover object-center group-hover:opacity-75"> </a> <div class="flex flex-col space-y-2 p-4"> <h3 class="text-sm text-gray-700">{{ title() }}</h4> <p class="text-lg font-medium text-gray-900">{{price()}}</p> <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full" (click)="addToCartHandler()">Add to cart</button> </div></div>

jesus dominguez

student•

Como tip si son novatos como un con tailwindcss juegan con las propiedades para que vayan viendo lo que pasa con su front y vayan agarrando practica parece muy bueno despreocuparte del css

Henry Andrés Giraldo Flórez

student•

Acá la maquetación de Tailwind usada

<div class="group rounded-1g border">
  <a href="#" class="w-full overflow-hidden rounded-t-1g bg-gray-200">
    <img [src]="image" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
  </a>
  <div class="flex flex-col space-y-2 p-4">
    <h3 class="text-sm text-gray-700">{{ title }}</h4>
    <p class="text-lg font-medium text-gray-900">{{price}}</p>
    <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
      (click)="addToCartHandler()">Add to cart</button>
  </div>
</div>

Luis Fernando Cruz Carrillo

student•

Aquí el GPT de Flowbite:

Alexis Condor

student•

<div class="group rounded-lg border">
    <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">
        <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
        <h3 class="text-sm text-gray-700">{{ title }}</h4>
        <p class="text-lg font-medium text-gray-900">{{price}}</p>
        <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
            (click)="addToCartHandler()">Add to cart</button>
    </div>
</div>

ANDRES ALFONSO MIRA MEJIA

student•

✅

Jhon Bray Ramos Alean

student•

<div class="group rounded-lg border"> <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200"> <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75"> </a> <div class="flex flex-col space-y-2 p-4"> <h3 class="text-sm text-gray-700">{{ title }}</h4> <p class="text-lg font-medium text-gray-900">{{price}}</p> <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full" (click)="addToCartHandler()">Add to cart</button> </div></div>

<div class="group rounded-lg border">
    <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">
        <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
        <h3 class="text-sm text-gray-700">{{ title }}</h4>
        <p class="text-lg font-medium text-gray-900">{{price}}</p>
        <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
            (click)="addToCartHandler()">Add to cart</button>
    </div>
</div>

<div class="group rounded-1g border">
    <a href="#" class="w-full overflow-hidden rounded-t-1g bg-gray-200">
      <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
      <h3 class="text-sm text-gray-700">{{ title }}</h4>
      <p class="text-lg font-medium text-gray-900">{{price}}</p>
      <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full hover:bg-gray-950 hover:text-white"
        (click)="addToCartHandler()">Add to cart</button>
    </div>
  </div>

<div class="mt-6 w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 
dark:border-gray-700">
    <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">
        <img [src]="img" [alt]="title" class="h-full w-full object-cover rounded-lg object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
        <span class="text-lg text-white">{{ title }}</span>
        <div class="flex items-center justify-between">
            <span class="text-3xl font-bold text-gray-900 dark:text-white">${{price}}</span>
            <a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none 
                        focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 
                        dark:hover:bg-blue-700 dark:focus:ring-blue-800" (click)="addToCartHandler()">
                Add to cart
            </a>
        </div>
    </div>
</div>
```\<div class="mt-6 w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">    \<a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">        \<img \[src]="img" \[alt]="title" class="h-full w-full object-cover rounded-lg object-center group-hover:opacity-75">    \</a>    \<div class="flex flex-col space-y-2 p-4">        \<span class="text-lg text-white">{{ title }}\</span>        \<div class="flex items-center justify-between">            \<span class="text-3xl font-bold text-gray-900 dark:text-white">${{price}}\</span>            \<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none                         focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600                         dark:hover:bg-blue-700 dark:focus:ring-blue-800" (click)="addToCartHandler()">                Add to cart            \</a>        \</div>    \</div>\</div>

<div class="group rounded-1g border">
  <a href="#" class="w-full overflow-hidden rounded-t-1g bg-gray-200">
    <img [src]="image" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
  </a>
  <div class="flex flex-col space-y-2 p-4">
    <h3 class="text-sm text-gray-700">{{ title }}</h4>
    <p class="text-lg font-medium text-gray-900">{{price}}</p>
    <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
      (click)="addToCartHandler()">Add to cart</button>
  </div>
</div>

<div class="group rounded-lg border">
    <a href="#" class="w-full overflow-hidden rounded-t-lg bg-gray-200">
        <img [src]="img" [alt]="title" class="h-full w-full object-cover object-center group-hover:opacity-75">
    </a>
    <div class="flex flex-col space-y-2 p-4">
        <h3 class="text-sm text-gray-700">{{ title }}</h4>
        <p class="text-lg font-medium text-gray-900">{{price}}</p>
        <button class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
            (click)="addToCartHandler()">Add to cart</button>
    </div>
</div>

Maquetación de Galería de Productos con Tailwind CSS

Introducción a Angular y Fundamentos

Desarrollo de Aplicaciones Modernas con Angular

Creando tu primer proyecto en Angular

Creación de componentes y rutas en Angular para gestión de tareas

String Interpolation en Angular: Transmisión de Datos a Templates

Modificación de Propiedades HTML con Angular: Property Binding

Eventos en Angular: click, doble click y cambio de input

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Reactividad Granular con Signals en Angular

Reactividad en HTML: Implementación de Signals en JavaScript

Estructuras de control en Angular

Estructuras de Control y Renderizado Dinámico en Angular

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Actualización de tareas con Angular y programación inmutable

Uso de ngIf y ngFor para control de flujos en Angular

Pluralización y ngSwitch en Angular para manejo de condiciones múltiples

Manejo Avanzado de Formularios Reactivos en Angular

Validaciones de Inputs en Formularios Reactivos con Angular

Alistando tu aplicación para producción

Validación de formularios y estilos dinámicos en Angular

Activación dinámica de clases en Angular con validaciones

Edición de Tareas Dinámicas en Aplicaciones Web

Estados Computados en Programación Reactiva con Signals

Persistencia de Tareas con LocalStorage en Angular

Compilación y Optimización de Aplicaciones Angular para Producción

Lanzamiento de Aplicaciones con Firebase Hosting y Angular

Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte

Sintaxis y rendimiento de for y switch en JavaScript moderno

Migración Automática a Nueva Sintaxis de Angular

Componentes Reutilizables y Comunicación

Creación de Tienda en Línea con Angular y Tailwind CSS

Creación y Organización de Componentes en Angular

Componentes Reutilizables en Angular: Creación y Maquetado de Productos

Uso de Angular DevTools para Debugging en Angular

Inputs en Angular: Comunicación de Datos entre Componentes

Outputs en Angular: Comunicación del Hijo al Padre

Maquetación de Galería de Productos con Tailwind CSS

Ciclo de vida de los componentes

Ciclo de Vida de Componentes en Angular

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

Ciclo de Vida de Componentes en Angular: Eventos Clave

Detección de Cambios en Inputs con ngOnChange en Angular

Prevención de fugas de memoria con ngOnDestroy en Angular

Creación de un Reproductor de Audio con WaveSurfer.js en Angular

Mejoras de la página About en e-commerce: audio y contador dinámico

Mejorando la interfaz del producto

Componentización y Manejo de Datos en Angular

Creación de Headers en Páginas Web con Angular

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo

Implementación de Reactividad en Carrito de Compras con Angular

Gestión de Carrito de Compras en Angular con ngOnChanges

Gestión de Estado en Angular: Solución al InputDrilling

Gestión de Estado Global en Angular con Servicios y Señales

Inyección de Dependencias en Angular: Conceptos y Prácticas

Integración y Datos

Conexión de Angular a REST API usando Fake Store API de Platzi

Creación de Alias para Imports Cortos en Proyectos JavaScript

Transformación de Datos con Pipes en Angular

Creación y uso de pipes personalizados en Angular

Manipulación de Fechas en Angular con Date Functions

Manipulación del DOM con Directivas en Angular

Deployment de Aplicaciones Angular en Vercel

Enrutamiento y Navegación

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas

Implementación de Router Link en Angular para SPA eficiente

Implementación de Layouts Compartidos en Angular para Vistas Anidadas

Uso de RouterLinkActive en Angular para Navegación Activa

Routing en Angular: Creación de Páginas de Detalle de Producto

Consulta dinámica de detalles de producto con Angular y REST API

Galería de Productos Dinámica con Angular y TypeScript

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Perfeccionando tu e-commerce

Filtrado de Productos por Categoría en E-commerce

Filtros de Productos con Query Params en Angular

Optimización de Aplicaciones con Lazy Loading y Code Splitting

Optimización de JavaScript en Angular con Lazy Loading

Optimización de Carga de Chunks con Preloading en Angular

Migración de Angular a Nueva Sintaxis con ng generate