Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio: Layouts Responsivos na Prática | Responsividade e Personalização
Tailwind CSS para Desenvolvimento Web

bookDesafio: Layouts Responsivos na Prática

Tarefa

Complete a estrutura HTML fornecida preenchendo as classes Tailwind CSS ausentes de acordo com os requisitos do layout apresentado.

  • O container deve possuir espaçamento interno (padding) que varia conforme os breakpoints:
    • Padding padrão: p-4;
    • No breakpoint sm: p-6;
    • No breakpoint md: p-8;
    • No breakpoint lg: p-10;
    • No breakpoint xl: p-12.
  • O texto deve apresentar cores e tamanhos diferentes em cada breakpoint.
    • Tamanho de texto padrão: text-base, cor: text-gray-700;
    • No breakpoint sm: text-lg, cor: text-gray-600;
    • No breakpoint md: text-xl, cor: text-gray-500;
    • No breakpoint lg: text-2xl, cor: text-gray-400;
    • No breakpoint xl: text-3xl, cor: text-gray-300.
index.html

index.html

copy
  • Para o container, utilize p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Para o texto, utilize 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.
index.html

index.html

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me where to place these Tailwind classes in the HTML structure?

Do you have a specific element in the HTML that should use these classes?

Would you like an example of the completed HTML structure with the required Tailwind classes?

Awesome!

Completion rate improved to 3.57

bookDesafio: Layouts Responsivos na Prática

Deslize para mostrar o menu

Tarefa

Complete a estrutura HTML fornecida preenchendo as classes Tailwind CSS ausentes de acordo com os requisitos do layout apresentado.

  • O container deve possuir espaçamento interno (padding) que varia conforme os breakpoints:
    • Padding padrão: p-4;
    • No breakpoint sm: p-6;
    • No breakpoint md: p-8;
    • No breakpoint lg: p-10;
    • No breakpoint xl: p-12.
  • O texto deve apresentar cores e tamanhos diferentes em cada breakpoint.
    • Tamanho de texto padrão: text-base, cor: text-gray-700;
    • No breakpoint sm: text-lg, cor: text-gray-600;
    • No breakpoint md: text-xl, cor: text-gray-500;
    • No breakpoint lg: text-2xl, cor: text-gray-400;
    • No breakpoint xl: text-3xl, cor: text-gray-300.
index.html

index.html

copy
  • Para o container, utilize p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Para o texto, utilize 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.
index.html

index.html

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 2
some-alt