Opdracht

Vul de meegeleverde HTML-structuur aan door de ontbrekende Tailwind CSS-klassen in te vullen volgens de opgegeven layouteisen.

• De container moet padding hebben die verandert bij verschillende breakpoints;
  • Standaard padding: p-4;
  • Bij sm breakpoint: p-6;
  • Bij md breakpoint: p-8;
  • Bij lg breakpoint: p-10;
  • Bij xl breakpoint: p-12.
• De tekst moet verschillende kleuren en groottes hebben bij verschillende breakpoints.
  • Standaard tekstgrootte: text-base, kleur: text-gray-700;
  • Bij sm breakpoint: text-lg, kleur: text-gray-600;
  • Bij md breakpoint: text-xl, kleur: text-gray-500;
  • Bij lg breakpoint: text-2xl, kleur: text-gray-400;
  • Bij xl breakpoint: text-3xl, kleur: text-gray-300.

• Voor de container, gebruik p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• Voor de tekst, gebruik 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.