Crea una card profile «Creador Coral» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición outlined con…
Componente · Cards
Card Finanzas Esmeralda
Prompt
Crea una card finance «Finanzas Esmeralda» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición bento con color principal #ef4444, secundario #f472b6 y fondo #fff1f2. 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
- finance
- bento
- Responsive
- Content
«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
Crea una card code «Código Mono» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición floating con color…
Crea una card wellness «Bienestar Lavanda» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición brutal con…
Crea una card status «Estado Cyber» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición gradient con color…
Crea una card feature «Empresa Azul» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición minimal con color…
Crea una card beauty «Belleza Rosa» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición glass con color…
Crea una card commerce «Comercio Solar» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición image-top con…
Crea una card minimal «Minimalista Slate» lista para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa una composición horizontal…