Tâche

Compléter la structure HTML fournie en ajoutant les classes Tailwind CSS manquantes selon les exigences de mise en page indiquées.

• Le conteneur doit avoir un espacement interne (padding) qui varie selon les points de rupture :
  • Padding par défaut : p-4 ;
  • Au point de rupture sm : p-6 ;
  • Au point de rupture md : p-8 ;
  • Au point de rupture lg : p-10 ;
  • Au point de rupture xl : p-12.
• Le texte doit avoir des couleurs et tailles différentes selon les points de rupture.
  • Taille de texte par défaut : text-base, couleur : text-gray-700 ;
  • Au point de rupture sm : text-lg, couleur : text-gray-600 ;
  • Au point de rupture md : text-xl, couleur : text-gray-500 ;
  • Au point de rupture lg : text-2xl, couleur : text-gray-400 ;
  • Au point de rupture xl : text-3xl, couleur : text-gray-300.

• Pour le conteneur, utiliser p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12 ;
• Pour le texte, utiliser 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.