Video Modal - Copy this React, Tailwind Component to your project

Crea un 1. Fondo • Color blanco (#FFFFFF) para que todo se vea limpio y minimalista. • Puede ocupar toda la pantalla o solo una parte, dependiendo de tus necesidades. 2. Contenedor principal • Ubicado en el centro de la pantalla, con bordes ligeramente redondeados (por ejemplo, 8px) para un look moderno. • Sombra suave alrededor (por ejemplo, box shadow: 0 2px 8px rgba(0,0,0,0.1)) para destacarlo del fondo. 3. Video en el centro • Reproductor de video con tamaño mediano (aprox. 600px de ancho, adaptándose a móvil si se necesita). • Controles básicos (reproducir/pausa, volumen) visibles. • Fondo del reproductor blanco o gris muy claro (#F8F8F8) cuando el video no esté reproduciéndose, para que sea coherente con el resto del pop‑up. 4. Texto y Colores • Título encima o debajo del video, en un color de acento (por ejemplo, un verde suave #3BB273 o un morado claro #6C63FF). • Texto breve (subtítulo o descripción) en gris oscuro (#333333), con tipografía sencilla tipo sans serif (ej. Roboto, Open Sans). • Mantén un tamaño de fuente de 18‑20px para el título y 14‑16px para subtítulos, garantizando legibilidad. 5. Botón o Llamada a la Acción (opcional) • Debajo del video, un botón para que el usuario realice alguna acción (ej. “Ver más” o “Comenzar”). • Color del botón: mismo color de acento que el título, con texto blanco (#FFFFFF). • Bordes redondeados (4‑8px) y un ligero hover que oscurezca o aclare el color para mostrar interactividad. 6. Cierre (“X”) • En la esquina superior derecha del contenedor, un ícono pequeño (un trazo delgado #333333) para cerrar el pop‑up. • Mantén un espacio de 16px desde los bordes para que sea fácil de ver y pulsar.