Interactive Muscle Display - Copy this Html, Tailwind Component to your project
Crea un div de dos columnas con las siguientes características: 1. Columna 1: Estructura Muscular del Cuerpo Humano: Esta columna debe mostrar una imagen o gráfico interactivo de la estructura muscular del cuerpo humano. Interactividad: Al pasar el mouse sobre un músculo específico, este debe resaltarse visualmente (por ejemplo, con un efecto de resplandor o contorno destacado) para enfocarlo, destacando ese músculo de los demás. Al hacer clic en un músculo, como el pecho, la columna 2 debe actualizarse para mostrar información relacionada con ese músculo. El resaltado debe ser dinámico y cada músculo debe ser interactivo, permitiendo al usuario hacer clic en diferentes músculos para explorar su estructura y subcategorías. 2. Columna 2: Categorías y Subcategorías de Músculos: Al hacer clic en un músculo (por ejemplo, el pecho), en esta columna debe aparecer un listado de categorías y subcategorías relacionadas con ese músculo. Por ejemplo, si se hace clic en pecho, deben mostrarse las siguientes categorías y subcategorías: Pectoral Pectoral Mayor Pectoral Medio Pectoral Inferior Cada categoría y subcategoría debe estar representada como un enlace que dirija a una página específica de la app donde se muestren los ejercicios relacionados con ese músculo o submúsculo. Las subcategorías deben ser fácilmente navegables y se deben mostrar de manera jerárquica para ayudar al usuario a identificar y explorar diferentes áreas de interés. 3. Características adicionales: Interactividad: El resaltado de músculos y el cambio dinámico de contenido en la columna 2 deben ser dinámicos y ejecutados mediante JavaScript (puede usarse vanilla JS o jQuery para manejar las interacciones). Diseño responsivo: El diseño debe adaptarse bien a diferentes tamaños de pantalla, especialmente para dispositivos móviles, donde la imagen de la estructura muscular y las categorías deben mostrarse de forma clara y funcional. Animación suave: El resaltado de músculos y el despliegue de categorías deben incluir animaciones suaves para mejorar la experiencia de usuario, como transiciones y efectos de desvanecimiento.
