No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componente de Card

7/31
Recursos

¿Cómo crear un componente de cartas con React y Tailwind?

Construir componentes se ha convertido en una habilidad esencial para aquellos interesados en el desarrollo web. En esta lección, nos enfocamos en crear un componente de "card" utilizando React y el poder estilístico de Tailwind CSS. Exploraremos el proceso, paso a paso, desde la estructura básica hasta los estilos finales, logrando un diseño visualmente atractivo para tu aplicación web.

¿Cómo estructurar el componente "card"?

Al iniciar la creación de un componente, es vital establecer una estructura clara y organizada. En este caso, nuestra "card" incluirá una imagen principal, un título, un ícono para agregar al carrito, y finalmente, un precio destacado. A continuación, se detalla cómo estructuramos la "card":

const Cart = () => {
  return (
    <div className="bg-white cursor-pointer w-56 h-64">
      <figure className="relative mb-4 w-full h-4/5">
        <span className="absolute bottom-0 left-0 text-xs bg-white text-black rounded-lg px-3 py-0.5 m-2">Electronics</span>
        <img className="w-full h-full object-cover rounded-lg" src="image_url" alt="headphones" />
        <div className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full">
          {/* Content for add to cart icon goes here */}
        </div>
      </figure>
      <p className="flex justify-between items-center">
        <span className="text-xs font-light">Headphones</span>
        <span className="text-lg font-medium">$300</span>
      </p>
    </div>
  );
};

export default Cart;

¿Cómo aplicar estilos con Tailwind CSS?

Un aspecto crucial al construir interfaces de usuario es la presentación. Tailwind CSS permite personalizar los estilos con rapidez y eficacia. Para nuestra "card", hemos definido un enfoque de diseño limpio y consistente empleando clases predefinidas de Tailwind:

  • Contenedor principal: Un div que actúa como encapsulador, utilizando un fondo blanco y un cursor de tipo puntero para simular interactividad.

  • Figura: Dentro de nuestra figura, empleamos posiciones absolutas (absolute) para los elementos internos, y relative para su contenedor para lograr posiciones específicas como superior derecha o inferior izquierda.

  • Imagen: Utilizamos object-cover para que la imagen se ajuste correctamente al contenedor sin distorsionarse.

  • Texto y etiquetas: Aplicamos fuentes pequeñas (text-xs) y estilos de fuente (font-light, font-medium) para diferenciar el título del producto y del precio, asegurando legibilidad y estética.

¿Cómo ajustar detalles finales para mejorar la apariencia?

Para concluir con un diseño armonioso, es fundamental afinar detalles como márgenes, rellenos y bordes redondeados. Estos aspectos enriquecen la experiencia visual y hacen que los componentes sean coherentes:

  • Redondeados: Usar rounded-lg para bordes suaves en toda la "card".
  • Márgenes y rellenos: Implementar diversas clases de margin y padding para proporcionar el espacio adecuado y prevenir el amontonamiento de los elementos.

Al completar estos pasos, habrás creado un componente de "card" atractivo y funcional. Experimenta variando los valores de clases Tailwind según tus necesidades y revisa la documentación oficial cuando necesites inspiración o aclaración. ¡Continúa practicando y perfeccionando tu habilidad con Tailwind y React, y te verás creando componentes más complejos con confianza!

Aportes 65

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si el div del ‘+’ es botón… debemos usar la etiqueta correspondiente.
Recordemos dar una buena semántica al HTML, obviamente esta etiqueta será clickable y para eso están los botones.

export const Card = () => {
  return (
    <div className="bg-white cursor-pointer w-56 h-60 rounded-lg">
      <figure className="relative mb-2 w-full h-4/5">
        <span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5">
          Electronics
        </span>
        <img className="w-full h-full object-cover rounded-lg" src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Headphones" />
        <button className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1">
          +
        </button>
      </figure>
      <p className="flex justify-between">
        <span className="text-sm font-light">Headphones</span>
        <span className="text-lg font-medium">$300</span>
      </p>
    </div>
  )
}

Asi va mi Card, decidi colocarle un bg al div de abajo y un box shadow al div de la card para ese efecto sombreado. ❤️

Que genial curso, lo estaba esperando mas que nada para organizar la estructura de mis proyectos, los card o los componentes son importantes para ahorrar codigo y ser mas limpios

Comparto como me quedó

pueden utilizar rafce para crear la funcines flechas te ahorra un poquito de tiempo

Con está página nomas toma captura o con la app recorte, seleccione lo que quiere, ctrl + c y pego en esta web:

imgbb

Suba la imagen y luego copie la dirección de imagen

No cobra y es rapido de usar

Si quieren agregar iconos al proyecto se pueden instalar esta dependecia: https://react-icons.github.io/react-icons
Es muy facil de usar y tiene una amplia cantidad de iconos 😁

Soy e único al que le cuesta adapatarse a Tailwind?

Creo que es muy cómodo, sin embargo, me cuesta que todo se haga con medidas tan especificas.

Personalmente me gusta jugar con valores muy específicos.

Tal vezsea solo yo que no se usar bien esta herramienta jajaja

En los cursos de Teff de antes siempre tenia la muletilla de “Basicamente” jaja ahora veo que usa diminutivos todo el tiempo: tagsito, componentico, etc… No sé si antes también lo hacia, pero aquí lo he notado mucho xD

Les comparto mi card. ![](https://static.platzi.com/media/user_upload/imagen-fe3ea96e-809f-41f7-ae35-14b6a1406ee5.jpg)

Pueden instalar el plugin de prettier en vscode y en settings.json insertar esta config.

"editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.semi": false,

Esto para que cada vez guarden el archivo el código tenga el formato de comillas simples para Js y Jsx.
Tampoco que lleven el punto y coma ;

No estoy siguiendo como tal el curso, pero asi va el proyecto. Me decante por hacerlo primero mobile firts y ya despues lo escalo a desktop ![](https://static.platzi.com/media/user_upload/project-55a07953-e341-40e4-be55-d693e052ae17.jpg)

Chicos, aquí les comparto una librería llamada Circum Icons, muy buena para insertar iconos en nuestros proyectos con React o cualquier otro Framework. 🙂
https://circumicons.com

Personalmente el agregar al carrito prefiero poner debajo y que sea accesible al usuario, creo que con el boton florante en la imagen se entiende que eso abrirá un modal para vista previa.

import React from 'react';

const Card = () => {
	return (
		<div className='flex flex-col w-60 rounded-lg overflow-hidden border border-gray-400 pb-2'>
			<figure className='relative w-full h-40'>
				<img
					src='https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
					alt='Product'
					className='w-full h-full object-cover'
				/>
				<span className='px-2 absolute text-xs text-black bg-white/60 rounded-lg bottom-2 left-2'>Electronic</span>
			</figure>
			<section className='flex flex-col h-full justify-between p-2 gap-4'>
				<div className='flex flex-row justify-between items-center'>
					<h3 className='text-sm font-light'>Headphones</h3>
					<p className='font-medium'>s/300.00</p>
				</div>
				<button className='bg-black text-white rounded-lg w-full py-2 font-medium hover:bg-black/95'>Add to Cart 🛒</button>
			</section>
		</div>
	);
};

export { Card };

Así va quedando mi Card del curso, y estoy familiarizado con tailwindCSS ya desde unos meses atras y me encanta usarlo🤗

En mi experiencia, los estilos p y m en Tailwind funcionan mejor si introduces valores específicos (personalmente prefiero la escala vh), ejemplos:
p-[3vh]
m-[1vh]
py-[3px]
mx-[6rem]
pl-[12px]
mr-[14vh]
etc.

Unsplash tiene imágenes de buena calidad para utilizar:
https://unsplash.com/es

[](<a href=“https://ibb.co/d7txq8R”><img src=“https://i.ibb.co/d7txq8R/imagen-2023-05-08-103247395.png” alt=“imagen-2023-05-08-103247395” border=“0”></a>)

Muy chévere el manejo de diseño con TailwindCSS, la verdad es nuevo para mi pero aun así hay clases que se asemejan mucho a lo que es CSS tradicional, y pues así vamos, muy parecido a lo que estamos haciendo con la profesora peroooo, nada mas cambia la imagen jaja ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-03-05%20a%20las%206.39.25p.m.-dc014462-fa84-4bd4-953c-2f6fa5866d7a.jpg)
![](https://static.platzi.com/media/user_upload/image-c76b74ee-79a9-428a-81e7-88da1f74634d.jpg)Asi quedo
**omo un componente React.** **Causa principal:** La causa principal de este error es que **los nombres de los componentes de React deben comenzar con una letra mayúscula.** React utiliza la convención de mayúsculas para distinguir entre etiquetas HTML estándar (minúsculas) y componentes personalizados (mayúsculas). **Solución experta:** 1. **Renombra el componente** `cards` **a** `Cards` **(con mayúscula):** * **Cambia el nombre del archivo:** Renombra el archivo `cards.jsx` a `Cards.jsx`. * **Cambia el nombre del componente en** `Cards.jsx`**:** Asegúrate de que el componente dentro de `Cards.jsx` se defina y exporte como `Cards`.
![](https://static.platzi.com/media/user_upload/image-9418d695-83a0-4d33-9269-baf0c512a69e.jpg)
Vamos muy bien, te amo![](https://static.platzi.com/media/user_upload/image-57895038-2977-4db6-be22-ac09e0d0ba20.jpg)
## 🦄✨ Una cosa que podemos hacer con la imagen es darle las dimensiones del contenedor y otorgarle la propiedad de object-fit:cover, para que no se sobreponga al nombre del articulo y su precio. ![](https://static.platzi.com/media/user_upload/image-aaf2b675-f523-4fd4-88a2-759d9b507fe1.jpg) Así podemos usar imágenes de cualquier dimensión ;)
Por ahora vamos así c:![](https://static.platzi.com/media/user_upload/imagen-fdbdac67-3cc6-4d92-aae7-7cbc93fdad54.jpg)
![](https://static.platzi.com/media/user_upload/image-b95b151f-b978-4390-88d0-07ae80951d64.jpg)
de momento así va quedado la aplicación. Y aprendiendo una nueva forma de dar estilos con ![]()tailwindcss ![](https://static.platzi.com/media/user_upload/card-00a42aff-7102-47bd-8c37-a65da3da055c.jpg)
<https://tailwindcss.com/>
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-14%20132733-cfd1fed8-7deb-4f18-a648-85fb31d1530a.jpg)Asi va quedando
Mi proyecto va asi de momento.. ![](https://static.platzi.com/media/user_upload/Captura%20desde%202024-02-10%2021-53-19-f2e6474e-4032-47b4-baae-ffe038d528b0.jpg)
Les comparto como quedo mi componente Card: ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-01-23%20a%20la%28s%29%209.21.11%20p.m.-fdb4e536-1762-40e9-b601-ba2cc1f8fd10.jpg)![]()
![](https://static.platzi.com/media/user_upload/image-5b66172c-0838-475a-ad89-375c35c5cd85.jpg) Aca mi card jj, decidi colocar tambien una shadow

Mi card

Puse tal cual el código y no se porque el span de Elecronics queda abajo de la imagen 😣 ```js const Card = () => { return (
Electronics
+

Headphones $300

) } export default Card ```![](https://i.ibb.co/rMSdrw2/ayuda.png)
```tsx type Props = { children?: React.ReactNode }; export const Layout = ({ children }: Props): JSX.Element => { return (
{children}
) }; ``````ts import { Layout } from '../../Components/Layout/Layout'; import { Card } from '../../Components/Card/Card'; import './home.css' type Props = { children?: React.ReactNode }; export function Home({ }: Props): JSX.Element { return ( <Layout> Home <Card /> </Layout> ) } ```
Es la primera vez que veo Tailwind y aunque me gusta que sea tan sencillo, también me da la sensación de tener código espagueti, no sé si solo es mi percepción, tal vez me falte trabajar más con esta herramienta

Y porque no trabajar con MUI?, Me parece que MUI es mucho más ordenado y profesional.

Ese mouse que tiene la teacher es épico. Otro level
Hola Teff asi va quedando mi pagina:![](https://static.platzi.com/media/user_upload/image-a7ae717e-2939-4a1f-a99d-b06c7a06c334.jpg)

A mi Card le agregue un fondo gris y un desenfoque en la etiqueta, dejo el codigo abajo ⬇️

_

const Card = () => {
    return (
        <div className="bg-gray-100 cursor-pointer w-56 h-60 m-4 rounded-lg">
            <figure className="relative mb-2 w-full h-4/5">
                <img src="" alt="headphones" className="object-cover w-full h-full rounded-lg" />
                <div className="absolute top-0 right-0 flex justify-center items-center rounded-full backdrop-blur-sm bg-white/70 w-6 h-6 m-2 font-medium p-1 hover:scale-110 transition-all">+</div>
                <span className="absolute bottom-0 left-0 backdrop-blur-sm bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5">Electronics</span>
            </figure>
            <p className="flex justify-between items-center px-2">
                <span className="text-sm font-light">Headphones</span>
                <span className="text-lg font-medium">$ 300</span>
            </p>
        </div>
    )
}

export { Card };
![]()![](https://static.platzi.com/media/user_upload/image-760cc278-cf30-4918-a17a-e1b3c234f51e.jpg)

Así vamos 💪

This is mine. ![](https://static.platzi.com/media/user_upload/image-3b70bf29-9bee-401b-a77e-351dfc65be1e.jpg)

Asi me quedo:

Les comparto como quedo la card ![](https://i.ibb.co/LQqVBGM/Captura-de-pantalla-2023-10-01-175036.png)
![](https://static.platzi.com/media/user_upload/image-8f2bcf76-faec-41a7-8850-9926d6e15fbe.jpg)

Todos vamos a hacer como que no vimos la Card con la imagen del Doom Eternal ahi ?

Teffi no es el tipo de persona que hay que hacer enojar evidentemente (?

De maravilla, parece magia!
Y además al grupo que hizo este curso es claro y ordenado, facilitan las cosas mucho mas!

Que cosa tan loca con Tailwind jajajaja… este framework de CSS es muy interesante. Sigamos aprendiendo 😎

asi va mi Proyecto

Asi voy yo

👏👏👏👏👏👏

Les dejo mi card! Recién arranco con Tailwind y me parece que en muchos aspectos es super intuitivo. Está muy interesante.

Ese atún gratinado ergonómico, lo veo sospechoso

![](

Yo lo hice con un ícono de React Icons, además de que usé \<button> en lugar de \
: ![](https://static.platzi.com/media/user_upload/Screenshot%202025-01-31%20at%2010.02.14p.m.-b961d5dd-a73a-4a94-9d74-f7ac7154ba83.jpg) ![](https://static.platzi.com/media/user_upload/Screenshot%202025-01-31%20at%2010.02.43p.m.-9c9fde61-8b44-4b7c-854b-da24e909abae.jpg)
Mi progreso hasta el momento: