Tarea

Completar la estructura HTML proporcionada agregando las clases de Tailwind CSS faltantes según los requisitos del diseño dado.

• El contenedor debe tener un padding que cambie en diferentes puntos de quiebre;
  • Padding por defecto: p-4;
  • En el punto de quiebre sm: p-6;
  • En el punto de quiebre md: p-8;
  • En el punto de quiebre lg: p-10;
  • En el punto de quiebre xl: p-12.
• El texto debe tener diferentes colores y tamaños en distintos puntos de quiebre.
  • Tamaño de texto por defecto: text-base, color: text-gray-700;
  • En el punto de quiebre sm: text-lg, color: text-gray-600;
  • En el punto de quiebre md: text-xl, color: text-gray-500;
  • En el punto de quiebre lg: text-2xl, color: text-gray-400;
  • En el punto de quiebre xl: text-3xl, color: text-gray-300.

• Para el contenedor, utilizar p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• Para el texto, utilizar text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.