Oppgave

Fullfør den oppgitte HTML-strukturen ved å fylle inn de manglende Tailwind CSS-klassene i henhold til de angitte layoutkravene.

• Containeren skal ha ulik polstring ved forskjellige breakpoints:
  • Standard polstring: p-4;
  • Ved sm breakpoint: p-6;
  • Ved md breakpoint: p-8;
  • Ved lg breakpoint: p-10;
  • Ved xl breakpoint: p-12.
• Teksten skal ha ulike farger og størrelser ved forskjellige breakpoints.
  • Standard tekststørrelse: text-base, farge: text-gray-700;
  • Ved sm breakpoint: text-lg, farge: text-gray-600;
  • Ved md breakpoint: text-xl, farge: text-gray-500;
  • Ved lg breakpoint: text-2xl, farge: text-gray-400;
  • Ved xl breakpoint: text-3xl, farge: text-gray-300.

• For beholderen, bruk p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
• For teksten, bruk 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.