Componente de Card

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 “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

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=“imagen-2023-05-08-103247395” border=“0”></a>)

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

![](