No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Componente de Card

7/31
Recursos

Aportes 36

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Les dejo una Cheat Sheet de Tailwind https://nerdcave.com/tailwind-cheat-sheet
Espero que les sirva para sus proyectos!

Hola comunidad, les comparto mis apuntes en Notion sobre cards y llamado a API麓s, espero les sean de utilidad.
Link aqu铆:
https://bg99astro.notion.site/Cards-y-llamado-a-API-s-b5be45bca26e48a99a25ffb9b650e383

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

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. 鉂わ笍

Comparto como me qued贸

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

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 馃榿

En los cursos de Teff de antes siempre tenia la muletilla de 鈥淏asicamente鈥 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

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

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

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=鈥渋magen-2023-05-08-103247395鈥 border=鈥0鈥></a>)

![](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 (?

Por aqu铆 c贸mo qued贸 mi tarjeta, le estoy dando a la p谩gina un estilo neobrutalism

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

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

![](