Notificaciones Component - Copy this React, Tailwind Component to your project

Genera esta interfaz con palabras en español ### **Propósito:** Mostrar mensajes importantes enviados por los docentes o el sistema. ### **Elementos:** 1. **Encabezado:** Título: "Notificaciones." 2. **Lista de Notificaciones:** Cada notificación incluye: Asunto. Fecha. Contenido breve. Filtro por tipo: Recordatorios. Mensajes del docente. Anuncios del sistema. sigue esta paleta de colores ### **Colores Primarios (Uso Principal)** **Azul Claro (#4A90E2):** Representa confianza, estabilidad y calma. Ideal para encabezados, botones principales y elementos destacados. **Blanco (#FFFFFF):** Fondo principal para mantener un diseño limpio y espacioso. ### **Colores Secundarios (Soporte y Contraste)** **Gris Claro (#F5F5F5):** Para fondos secundarios (paneles, tarjetas) y separación visual. **Gris Medio (#9E9E9E):** Para textos secundarios o explicaciones. ### **Colores de Resaltado (Llamar la Atención)** **Verde (#4CAF50):** Indicadores de progreso o estados positivos (completado, éxito). **Amarillo (#FFC107):** Para advertencias o información importante. **Rojo (#F44336):** Para errores o estados críticos. ### **Colores para Acciones e Interactividad** **Naranja (#FF9800):** Botones de llamada a la acción secundaria o elementos interactivos destacados. **Cian (#00BCD4):** Para enlaces o detalles interactivos relacionados con actividades. ### **Colores para Dimensiones del Aprendizaje (Codificación Visual)** Cada dimensión puede tener un color asociado para facilitar la identificación rápida: **Procesamiento:** Azul (#4A90E2). **Percepción:** Verde (#4CAF50). **Entrada de Información:** Amarillo (#FFC107). **Comprensión:** Naranja (#FF9800). **Interacción Social:** Cian (#00BCD4). ### **Ejemplo de Aplicación en la Plataforma** **Fondo Principal:** Blanco (#FFFFFF) para no saturar al usuario. **Paneles o Tarjetas:** Gris Claro (#F5F5F5) con bordes sutiles. **Texto Principal:** Gris Oscuro (#333333) para buen contraste. **Botones Principales:** Azul Claro (#4A90E2) con texto blanco. **Indicadores de Estado:** Verde para progreso (barra de avance). Rojo para errores (mensaje de validación). Amarillo para advertencias (actividades pendientes). **Módulos de Aprendizaje:** Los colores de las dimensiones pueden usarse como etiquetas o barras laterales en los objetos de aprendizaje.