Calendar - Copy this React, Tailwind Component to your project

en el diseño para movil mejoralo y Usa un contenedor principal que ocupe todo el ancho y alto disponibles. Aplica un padding interno de 16px para los márgenes laterales. Diseño: Usa un layout tipo flex en columna para apilar las secciones: encabezado, calendario y barra inferior. 2. Encabezado (Mes y Año) Estructura: Coloca el título del mes y el año en un div o contenedor separado. Agrega las flechas de navegación (izquierda y derecha) y alinea el contenido de forma horizontal. Añade un icono de búsqueda y un botón (+) en el lado derecho. Estilos: Usa display: flex; justify-content: space-between; align-items: center; para distribuir los elementos horizontalmente. Título del mes: Tamaño de fuente: 24px. Peso: Bold. Año: Tamaño de fuente: 14px. Peso: Regular. Flechas e íconos: Tamaño: 20px. Margen entre iconos: 8px. 3. Vista de Días de la Semana Estructura: Crea un contenedor para los días (L, M, X, J, V, S, D). Usa un div con 7 celdas dentro, cada una representando un día. Estilos: Aplica display: grid; grid-template-columns: repeat(7, 1fr); para crear columnas iguales. Texto: Tamaño: 12px. Peso: Regular. Alineación: Centrado. 4. Celdas del Calendario (Días del Mes) Estructura: Crea un contenedor para las celdas del calendario. Cada celda será un día (1 al 31). Para el día seleccionado, añade una clase especial. Estilos: Tamaño de cada celda: 40px x 40px. Espaciado entre celdas: 8px. Texto: Tamaño: 14px. Peso: Regular. Alineación: Centrado. Día seleccionado: Usa un borde redondeado (border-radius: 50%) y un color de fondo específico. Usa un display: grid; grid-template-columns: repeat(7, 1fr); para estructurar las celdas. solo mejora el diseño movil, el resto estaperfecto y no lo toques