Aufgabe

Vervollständigen Sie die bereitgestellte HTML-Struktur, indem Sie die fehlenden Tailwind CSS-Klassen gemäß den angegebenen Layout-Anforderungen ausfüllen.

• Der Container sollte an verschiedenen Breakpoints unterschiedliche Abstände haben;

  • Standardabstand: p-4;

  • Bei sm Breakpoint: p-6;

  • Bei md Breakpoint: p-8;

  • Bei lg Breakpoint: p-10;

  • Bei xl Breakpoint: p-12.

• Der Text sollte an verschiedenen Breakpoints unterschiedliche Farben und Größen haben.

  • Standardtextgröße: text-base, Farbe: text-gray-700;

  • Bei sm Breakpoint: text-lg, Farbe: text-gray-600;

  • Bei md Breakpoint: text-xl, Farbe: text-gray-500;

  • Bei lg Breakpoint: text-2xl, Farbe: text-gray-400;

  • Bei xl Breakpoint: text-3xl, Farbe: text-gray-300.

• Für den Container, verwenden Sie p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;

• Für den Text, verwenden Sie 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.