Desafio: 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
efocus:ring-blue-500
).
- Borda cinza clara (
- 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
efocus:ring-blue-500
).
- Fundo azul primário (
index.html
- Cor da Borda: Utilize
border-gray-300
para uma borda cinza clara; - Cantoneiras Arredondadas: Utilize
rounded-md
para cantos medianamente arredondados; - Anel de Foco: Utilize
focus:ring-2
para adicionar um anel ao focar efocus:ring-blue-500
para cor azul. - Hover no Botão de Enviar: Utilize
hover:bg-blue-700
para um azul mais escuro ao passar o mouse; - 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 efocus:ring-blue-500
para definir a cor do anel.
index.html
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 6
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 3.57
Desafio: 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
efocus:ring-blue-500
).
- Borda cinza clara (
- 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
efocus:ring-blue-500
).
- Fundo azul primário (
index.html
- Cor da Borda: Utilize
border-gray-300
para uma borda cinza clara; - Cantoneiras Arredondadas: Utilize
rounded-md
para cantos medianamente arredondados; - Anel de Foco: Utilize
focus:ring-2
para adicionar um anel ao focar efocus:ring-blue-500
para cor azul. - Hover no Botão de Enviar: Utilize
hover:bg-blue-700
para um azul mais escuro ao passar o mouse; - 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 efocus:ring-blue-500
para definir a cor do anel.
index.html
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 6