Compito

Completa la struttura HTML fornita inserendo le classi Tailwind CSS mancanti secondo i requisiti di layout indicati.

• Il contenitore deve avere un padding che varia a seconda dei breakpoint;
  • Padding di default: p-4;
  • Al breakpoint sm: p-6;
  • Al breakpoint md: p-8;
  • Al breakpoint lg: p-10;
  • Al breakpoint xl: p-12.
• Il testo deve avere colori e dimensioni differenti a seconda dei breakpoint.
  • Dimensione testo di default: text-base, colore: text-gray-700;
  • Al breakpoint sm: text-lg, colore: text-gray-600;
  • Al breakpoint md: text-xl, colore: text-gray-500;
  • Al breakpoint lg: text-2xl, colore: text-gray-400;
  • Al breakpoint xl: text-3xl, colore: text-gray-300.

• Per il contenitore, utilizzare p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• Per il testo, utilizzare 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.