Завдання

Завершіть надану HTML-структуру, додавши відсутні класи Tailwind CSS відповідно до вимог макета.

• Контейнер повинен мати відступи, що змінюються на різних брейкпоінтах:
  • Відступ за замовчуванням: p-4;
  • На брейкпоінті sm: p-6;
  • На брейкпоінті md: p-8;
  • На брейкпоінті lg: p-10;
  • На брейкпоінті xl: p-12.
• Текст повинен мати різні кольори та розміри на різних брейкпоінтах.
  • Розмір тексту за замовчуванням: text-base, колір: text-gray-700;
  • На брейкпоінті sm: text-lg, колір: text-gray-600;
  • На брейкпоінті md: text-xl, колір: text-gray-500;
  • На брейкпоінті lg: text-2xl, колір: text-gray-400;
  • На брейкпоінті xl: text-3xl, колір: text-gray-300.

• Для контейнера використовуйте p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• Для тексту використовуйте 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.