JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="usuario" type="text" placeholder="Digite seu login: " />
<br/>
<br/>
<input id="senha" type="password" placeholder="Digite sua senha: " />
<br/>
<br/>
<input type="button" value="Fazer login" onclick="validarUsuarioSenha()" />
<br/>
<br/>
<div id="loginCorreto">Login efetuado com sucesso!</div>
<div id="loginErrado">Usuário ou senha inválidos!</div>
CSS
#loginCorreto {
width: 235px;
height: 20px;
background: green;
color: #FFFFFF;
display: none;
}
#loginErrado {
width: 235px;
height: 20px;
background: red;
color: #FFFFFF;
display: none;
}
JavaScript
var username = "admin";
var password = "admin";
function validarUsuarioSenha() {
if ($("#usuario").val() == username && $("#senha").val() == password) {
$("#loginCorreto").show();
} else {
$("#loginErrado").show();
}
}