Drommo
Componente · Cards

Card Viaje Océano

Prompt

Crea una card travel «Viaje Océano» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición image-top con color principal #0ea5e9, secundario #14b8a6 y fondo #effcff. Incluye título semántico, texto de apoyo, placeholder visual, metadatos, badge, acción principal y menú adicional. Soporta estados default, hover, focus-visible, seleccionado, carga, skeleton, vacío, deshabilitado y error. Implementa correctamente el patrón de enlace en toda la card sin elementos interactivos anidados. Añade props tipadas, relaciones de aspecto responsive, line clamp, teclado, foco visible, contraste WCAG AA y reducción de movimiento. Anima transform y opacity sin layout shift. Devuelve código, datos demo, dependencias, ejemplo de uso y pruebas.

Tipo
Componente · Cards
Tecnología
React, TypeScript, Tailwind CSS, shadcn/ui
  • Card
  • travel
  • image-top
  • Interactive
  • Content
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas