Tarefa

Complete a estrutura HTML fornecida preenchendo as classes Tailwind CSS ausentes de acordo com os requisitos do layout apresentado.

• O container deve possuir espaçamento interno (padding) que varia conforme os breakpoints:
  • Padding padrão: p-4;
  • No breakpoint sm: p-6;
  • No breakpoint md: p-8;
  • No breakpoint lg: p-10;
  • No breakpoint xl: p-12.
• O texto deve apresentar cores e tamanhos diferentes em cada breakpoint.
  • Tamanho de texto padrão: text-base, cor: text-gray-700;
  • No breakpoint sm: text-lg, cor: text-gray-600;
  • No breakpoint md: text-xl, cor: text-gray-500;
  • No breakpoint lg: text-2xl, cor: text-gray-400;
  • No breakpoint xl: text-3xl, cor: text-gray-300.

• Para o container, utilize p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• Para o texto, utilize 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.