25 ejemplos listos para usar

Crea un componente de card de producto en React con Tailwind. Debe tener una imagen en la parte superior con relación de aspecto 16:9, debajo el nombre del producto en negrita y tamaño grande, luego la descripción en color gris, y al final el precio resaltado en color de acento. Usa un estilo glassmorphism con fondo semitransparente y bordes redondeados.

Page ProductCard
  Section #glass
    Image < product.thumbnail [ratio:16/9]
    Text < product.name !bold !xl
    Text < product.description #muted
    Text < product.price #accent !bold

export function ProductCard({ product }) {
  return (
    <div className="glass-card rounded-2xl overflow-hidden">
      <img src={product.thumbnail} className="w-full aspect-video object-cover" />
      <div className="p-4">
        <h2 className="text-xl font-bold">{product.name}</h2>
        <p className="text-muted-foreground">{product.description}</p>
        <p className="text-accent font-bold">{product.price}</p>
      </div>
    </div>
  )
}

Crea una card de producto en React que muestre imagen, nombre en negrita y precio. Si el producto tiene stock disponible, muestra un botón verde que diga "Agregar al carrito" y que llame a CartStore.add() con el producto. Si no hay stock, muestra una etiqueta gris que diga "Agotado". Usa estilos glassmorphism y Tailwind.

Page ProductCard
  Section #glass
    Image < product.thumbnail [ratio:16/9]
    Text < product.name !bold
    Text < product.price #accent
    ( product.inStock ) ->
      Button "Agregar al carrito" => CartStore.add(product)
    :
      Badge "Agotado" #muted

export function ProductCard({ product }) {
  return (
    <div className="glass-card rounded-2xl overflow-hidden">
      <img src={product.thumbnail} className="w-full aspect-video object-cover" />
      <div className="p-4 space-y-2">
        <h2 className="font-bold">{product.name}</h2>
        <p className="text-accent font-bold">{product.price}</p>
        {product.inStock ? (
          <button onClick={() => CartStore.add(product)}
            className="nexus-button-primary w-full">
            Agregar al carrito
          </button>
        ) : (
          <span className="nexus-badge">Agotado</span>
        )}
      </div>
    </div>
  )
}

Crea un componente de tarjeta de estadísticas en React con Tailwind. Debe mostrar una etiqueta en la parte superior en color gris claro, el valor principal en tamaño grande y negrita con color de acento, y debajo un indicador de cambio en color verde. Usa fondo glassmorphism con bordes redondeados y padding generoso.

Section StatsCard #glass
  Text < stat.label #muted
  Text < stat.value !bold !xl #accent
  Text < stat.change #success

export function StatsCard({ stat }) {
  return (
    <div className="glass-card rounded-2xl p-6">
      <p className="text-muted-foreground text-sm">{stat.label}</p>
      <p className="text-3xl font-bold text-accent mt-1">{stat.value}</p>
      <p className="text-green-500 text-sm mt-1">{stat.change}</p>
    </div>
  )
}

Crea una card de perfil de usuario en React centrada verticalmente. Debe mostrar el avatar del usuario circular en la parte superior, debajo el nombre en negrita, el rol en gris, y el email en color de acento. Todos los elementos centrados. Usa estilos glassmorphism con Tailwind y bordes redondeados.

Section ProfileCard #glass
  Image < user.avatar [ratio:1/1] !round
  Text < user.name !bold
  Text < user.role #muted
  Text < user.email #accent

export function ProfileCard({ user }) {
  return (
    <div className="glass-card rounded-2xl p-6 flex flex-col items-center gap-3">
      <img src={user.avatar} className="w-20 h-20 rounded-full object-cover" />
      <h3 className="font-bold text-lg">{user.name}</h3>
      <p className="text-muted-foreground text-sm">{user.role}</p>
      <p className="text-accent text-sm">{user.email}</p>
    </div>
  )
}

Crea una cuadrícula responsiva de cards de producto en React con Tailwind. En desktop muestra 3 columnas, en móvil 1 columna. Cada card debe tener imagen 16:9, nombre en negrita, precio en color de acento y un botón que navegue al detalle del producto. Itera sobre un array de productos. Usa glassmorphism y gap entre cards.

Page ProductGrid
  Grid [cols:3]
    Section #glass * 6
      Image < product.thumbnail [ratio:16/9]
      Text < product.name !bold
      Text < product.price #accent
      Button "Ver más" => router.push(product.id)

export function ProductGrid({ products }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {products.map(product => (
        <div key={product.id} className="glass-card rounded-2xl overflow-hidden">
          <img src={product.thumbnail} className="w-full aspect-video object-cover" />
          <div className="p-4">
            <h3 className="font-bold">{product.name}</h3>
            <p className="text-accent">{product.price}</p>
            <button onClick={() => router.push(product.id)}
              className="nexus-button-primary mt-2 w-full">
              Ver más
            </button>
          </div>
        </div>
      ))}
    </div>
  )
}