Login Screen - Copy this React, Tailwind Component to your project

Crie uma tela de login para o sistema TRIFONO com as seguintes especificações: 1. **Layout**: Tela centralizada e responsiva. Design limpo e moderno, utilizando Tailwind CSS. Fundo cinza claro (#F3F4F6) e formulário com bordas arredondadas e sombra. 2. **Elementos do Formulário**: Campo de e mail: Tipo: texto. Placeholder: "Digite seu e mail". Validação: obrigatório, formato de e mail válido. Campo de senha: Tipo: password. Placeholder: "Digite sua senha". Validação: obrigatório. Botão de login: Cor: azul (#007BFF). Texto: "Entrar". Comportamento ao clicar: Enviar as credenciais para o endpoint: `http://localhost/sistema trifono/backend/login.php`. Redirecionar para o dashboard em caso de sucesso. Exibir mensagem de erro em caso de falha. 3. **Mensagens**: Exibir uma mensagem de erro em vermelho, abaixo do formulário, em caso de falha no login. Mensagem de carregamento: "Carregando conexão com o backend..." enquanto aguarda a resposta. 4. **Link para Recuperação de Senha**: Texto: "Esqueceu sua senha?" Localização: abaixo do botão de login. Link: direcionar para `/recover`. 5. **Estilo Responsivo**: Adapte o layout para dispositivos móveis (tamanho da tela reduzido). Certifique se de que o formulário ocupa 80% da largura na visualização mobile. 6. **Comportamento Geral**: Após o envio do formulário: Validar os campos localmente antes de enviar. Exibir mensagem de erro em caso de campos inválidos. Conectar ao backend para autenticação via API REST. 7. **Texto do Cabeçalho**: Título: "Login Sistema TRIFONO". Centralizado no topo do formulário. 8. **Fonte e Estilo Geral**: Utilize fontes padrão do Tailwind (sans serif). Mantenha a paleta de cores em tons de azul e cinza. Certifique se de que o código seja modular e compatível com React para fácil integração com outras partes do sistema.