Admin Panel - Copy this React, Tailwind Component to your project

Diseña una interfaz gráfica web profesional con las siguientes características: Diseño General: Estructura de dos columnas: Izquierda: Controles y opciones del usuario. Derecha: Vista previa del reconocimiento. Colores: Barra superior negra con texto blanco. Fondo principal blanco o gris claro (#F5F5F5). Botones de acción con colores azul (#4A90E2), verde (#4CAF50), y rojo (#F44336). Sección Superior: Barra de navegación superior: Color: Negro. Texto: "Academia de Administración" centrado. Íconos: A la izquierda: Un ícono de "menú hamburguesa". A la derecha: Opcional para ajustes o ayuda. Columna Izquierda: Opciones Campo "Listas": Menú desplegable para seleccionar cursos con opciones predefinidas. Ícono de calendario o similar junto al menú. Campo "Fecha del curso": Menú desplegable para seleccionar una fecha específica del curso. Ícono de calendario junto al menú. Campo "Nombre": Campo de texto con un placeholder como "Ingresa el nombre del estudiante". Opciones de selección: Dos checkboxes: "Seleccionar constancia". "Seleccionar todas". Lista de academias: Una lista vertical con scroll. Cada elemento tiene un checkbox para selección individual. Ejemplo de elementos: "Academia de Sistemas". "Academia de Administración". Columna Derecha: Vista Previa Título: "Vista Previa" alineado a la izquierda. Número de páginas: "2/25" (páginas actuales) centrado arriba del documento. Flechas de navegación: Una flecha a la izquierda para retroceder. Una flecha a la derecha para avanzar. Documento de vista previa: Muestra una imagen de un reconocimiento. Texto formal con logos en la parte superior e inferior. Información personal del estudiante o curso. Barra Inferior: Botones de Acción Botones: "Cancelar": Color rojo (#F44336), borde redondeado. "Generar todas": Color azul (#4A90E2), borde redondeado. "Generar PDF": Color verde (#4CAF50), borde redondeado. Posición: Alineados horizontalmente en la parte inferior de la pantalla. Interactividad: Los botones deben ser interactivos con un efecto de hover que cambie el color ligeramente. Al hacer clic en "Generar PDF", descarga el reconocimiento actual. Al hacer clic en "Generar todas", genera todos los reconocimientos seleccionados. Diseño Responsive: En dispositivos móviles, la columna izquierda debe apilarse sobre la vista previa. Los botones deben ocupar todo el ancho en dispositivos pequeños.