Selector de pestañas

Crea un selector de pestañas: al pulsar una pestaña se muestra su contenido. Practicas el estado para saber cuál está activa, el renderizado condicional y los roles de accesibilidad de las pestañas.

• La interfaz completa: la lista de pestañas y el panel de contenido.
• Tu trabajo es la lógica: saber qué pestaña está activa y mostrar solo su contenido.
• Conserva los role (tablist, tab, tabpanel) y los nombres Profile, Security y Alerts: los usan los tests.

• Al empezar, la pestaña Profile está activa y ves Profile details.
• Al pulsar otra pestaña se muestra solo el contenido de esa pestaña.
• Cada pestaña indica con aria-selected si es la activa.

• Abres el reto → ves Profile details.
• Pulsas Security → ves Security options y ya no Profile details.

• Un estado mínimo (el id activo) como fuente de verdad.
• Renderizado condicional o el atributo hidden.
• Los roles de las pestañas: tablist, tab, tabpanel, aria-selected.