JSFiddle - React, Tailwind, and code Playground

by ricardonews

HTML

<!doctype html>
<html>
<?php
    require_once"config.php";
?>
    <head>
        <title>APRENDIZ DE JS</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">

        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                $("#but_submit").click(function(){
                    var username = $("#meu_nome").val().trim();
                    var password = $("#minha_senha").val().trim();

                    if( username != "" && password != "" ){
                        $.ajax({
                            url:'pesquisar.php',
                            type:'post',
                            data:{username:username,password:password},
                            success:function(response){
                                var msg = "";
                                if(response == 1){
                                    window.location = "home.php";
                                }else{
                                    msg = "Invalid username and password!";
                                }
                                $("#message").html(msg);
                            }
                        });
                    }
                });

            });
        </script>
    </head>
    <body>
        <div class="container">

            <div id="div_login">
                <h1>Login</h1>
                <div id="message"></div>
                <div>
                    <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" />
                </div>
                <div>
                    <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/>
                </div>
                <div>
                    <input type="button" value="logar" name="but_submit" id="but_submit" />
                </div>
            </div>

        </div>
   ...

CSS

*{margin:0; padding:0;}
html{
	height:100%;
	background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
}
.erros, .ok
{
	width:390px;
	padding:5px;
	background:rgba(238, 249, 113, 0.9);
	margin: 20px auto 0 auto;
	border: 1px solid rgba(222,239,10,0.9);
	border-radius: 4px;
	color: #333;

}
.ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;}
body{
	font-family: "Trebuchet MS", tahoma, arial;
}

#formulario{
	width:500px;
	margin:40px auto;
	text-align:center;
	position:relative;
}
#formulario fieldset{
	background:white;
	border:0 none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;

	box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
	padding:20px 30px;

	box-sizing: border-box;
	width:80%;
	margin:0 10%;
	position:absolute;
}
#formulario input, #formulario textarea{
	padding:10px;
	border:1px solid rgba(38, 128, 101, 0.9);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	outline:none;
	box-sizing: border-box;
	width:100%;
	font:14px "Trebuchet MS", tahoma, arial;
	color:#090;
	margin-bottom:10px;
}
#formulario .acao{
	width:100px;
	background:rgba(38, 128, 101, 0.9);
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	padding:12px 0;
	float:left;
	margin-right:5%;
}
#formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}