Challenge: Responsive Design

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the given layout requirements.

• The container should have padding that changes at different breakpoints;
  • Default padding: p-4;
  • At sm breakpoint: p-6;
  • At md breakpoint: p-8;
  • At lg breakpoint: p-10;
  • At xl breakpoint: p-12.
• The text should have different colors and sizes at different breakpoints.
  • Default text size: text-base, color: text-gray-700;
  • At sm breakpoint: text-lg, color: text-gray-600;
  • At md breakpoint: text-xl, color: text-gray-500;
  • At lg breakpoint: text-2xl, color: text-gray-400;
  • At xl breakpoint: text-3xl, color: text-gray-300.

• For the container, use p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• For the text, use 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.