Componente de Card

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

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 ;

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

Mi card

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

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 };

Así vamos 💪

Asi me quedo:

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

![](