Plans and Services - Copy this React, Tailwind Component to your project

"Quiero-un-componente-en-React-que-muestre-de-manera-ordenada-y-atractiva-los-planes-y-servicios-que-ofrezco.-Debe-incluir-dos-categorías-principales:-Planes-Online-y-Plan-Presencial.-Cada-categoría-debe-tener-lo-siguiente:-Planes-Online:-Tres-subplanes:-Básico,-Personalizado,-y-Premium.-Una-breve-descripción-para-cada-plan-(por-ejemplo,-"Incluye-acceso-a-contenido-básico-y-una-rutina-personalizada").-Opcionalmente,-mostrar-precios-para-cada-plan-o-indicar-que-se-deben-solicitar-directamente.-Plan-Presencial:-Una-breve-descripción-del-servicio.-Indicar-si-el-cliente-puede-elegir-el-gimnasio-o-si-hay-acuerdos-con-gimnasios-específicos.-Opciones-de-modalidad-según-las-sesiones-por-semana-(por-ejemplo,-"2-sesiones-por-semana").-Diseño-y-Layout:-Usa-React-y-Tailwind-CSS-para-estilos.-Cada-plan-debe-estar-dentro-de-una-tarjeta-con-bordes-redondeados,-sombra-(shadow-lg),-y-espaciado-interno-(p-6).-Agrega-botones-en-cada-tarjeta-para-"Solicitar-Información"-o-"Ver-Más".-Asegúrate-de-que-sea-responsivo:-en-dispositivos-móviles,-las-tarjetas-deben-estar-apiladas-verticalmente,-mientras-que-en-pantallas-más-grandes-deben-mostrarse-en-un-diseño-de-cuadrícula-(grid-cols-2-o-grid-cols-3).-Estilo:-Usa-colores-sutiles-y-agradables-para-el-fondo-y-botones-(por-ejemplo,-bg-blue-500-y-hover:bg-blue-600-para-los-botones).-Títulos-destacados-(text-xl-font-bold)-y-texto-descriptivo-claro-(text-gray-600).-Espaciados-bien-definidos-para-que-el-contenido-sea-visualmente-cómodo-(py-8-sm:py-12-md:py-16-lg:py-20).-Funcionalidad-(Opcional):-Usa-props-para-pasar-las-descripciones-y-precios,-permitiendo-reusabilidad-del-componente.-Implementa-un-estado-para-manejar-qué-plan-está-seleccionado-o-para-mostrar-más-información-en-un-modal."-que-sea-responsivo