Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Criar Formulários | Construindo Componentes Básicos
Tailwind CSS para Desenvolvimento Web

bookDesafio: Criar Formulários

Tarefa

Utilize o Tailwind CSS para finalizar a estilização de um formulário com campos de entrada, áreas de texto, botões de opção e um switch.

Preencha os espaços em branco com as classes apropriadas do Tailwind CSS para obter a estilização desejada.

  • Inputs e Textareas:
    • Borda cinza clara (border-gray-300);
    • Cantos medianamente arredondados (rounded-md);
    • Estado de foco com anel azul (focus:ring-2 e focus:ring-blue-500).
  • Botão de Enviar:
    • Fundo azul primário (bg-blue-500);
    • Azul mais escuro ao passar o mouse (hover:bg-blue-700);
    • Cantos arredondados (rounded);
    • Estado de foco com anel (focus:outline-none, focus:ring-2 e focus:ring-blue-500).
index.html

index.html

copy
  1. Cor da Borda: Utilize border-gray-300 para uma borda cinza clara;
  2. Cantoneiras Arredondadas: Utilize rounded-md para cantos medianamente arredondados;
  3. Anel de Foco: Utilize focus:ring-2 para adicionar um anel ao focar e focus:ring-blue-500 para cor azul.
  4. Hover no Botão de Enviar: Utilize hover:bg-blue-700 para um azul mais escuro ao passar o mouse;
  5. Anel no Botão de Enviar: Utilize focus:outline-none para remover o contorno padrão de foco, focus:ring-2 para adicionar um anel ao focar e focus:ring-blue-500 para definir a cor do anel.
index.html

index.html

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

Awesome!

Completion rate improved to 3.57

bookDesafio: Criar Formulários

Deslize para mostrar o menu

Tarefa

Utilize o Tailwind CSS para finalizar a estilização de um formulário com campos de entrada, áreas de texto, botões de opção e um switch.

Preencha os espaços em branco com as classes apropriadas do Tailwind CSS para obter a estilização desejada.

  • Inputs e Textareas:
    • Borda cinza clara (border-gray-300);
    • Cantos medianamente arredondados (rounded-md);
    • Estado de foco com anel azul (focus:ring-2 e focus:ring-blue-500).
  • Botão de Enviar:
    • Fundo azul primário (bg-blue-500);
    • Azul mais escuro ao passar o mouse (hover:bg-blue-700);
    • Cantos arredondados (rounded);
    • Estado de foco com anel (focus:outline-none, focus:ring-2 e focus:ring-blue-500).
index.html

index.html

copy
  1. Cor da Borda: Utilize border-gray-300 para uma borda cinza clara;
  2. Cantoneiras Arredondadas: Utilize rounded-md para cantos medianamente arredondados;
  3. Anel de Foco: Utilize focus:ring-2 para adicionar um anel ao focar e focus:ring-blue-500 para cor azul.
  4. Hover no Botão de Enviar: Utilize hover:bg-blue-700 para um azul mais escuro ao passar o mouse;
  5. Anel no Botão de Enviar: Utilize focus:outline-none para remover o contorno padrão de foco, focus:ring-2 para adicionar um anel ao focar e focus:ring-blue-500 para definir a cor do anel.
index.html

index.html

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6
some-alt