AC
Aarón Ccenta

Character Trait Selection - Copy this Angular, Tailwind Component to your project

Create a component for a character trait selection interface with the following specifications: Include a tab navigation at the top with three options: "Comportamiento", "Inteligencia", and "Personalidad" Display a list of selectable items, each containing: A circular purple icon with "01" inside Text "Ice baron" as the main label "40 min" as a subtitle A checkmark icon on the right side Use object mapping to render multiple items (at least 5 shown in the image) Add a footer with: A "Tiempo" label on the left with "00:15 min" displayed A "Guardar" (Save) button on the right with a pencil icon Implement conditional rendering for the active tab content Use white as the base color and shades of purple for accents (#574884 or similar) Ensure the component is responsive and properly aligned Add subtle shadows to the list items and footer for depth

Prompt
Component Preview

About

Character Trait Selection - A responsive Angular component with tab navigation, circular icons, checkmarks, and a footer. Built with A. Get code instantly!

Share

Last updated 1 month ago