JSFiddle - React, Tailwind, and code Playground

by zamalpost

HTML

<html>
<head>
<title>Login</title>
</head>
<link rel="stylesheet" type="text/css" href="FormLogin.css">
<script>
function userlogin () {
var myForm = document.login;
 if (myForm.username.value == "wildhan" && myForm.password.value == "triherlian")
 alert("berhasil!")
 else if (myForm.username.value != "wildhan" && myForm.password.value == "triherlian")
 alert("Username salah!")
 else if (myForm.username.value == "wildhan" && myForm.password.value != "triherlian")
 alert("Password salah!")
 else if (myForm.username.value == "" && myForm.password.value == "")
 alert("Masukan Username dan password!")
 else
 alert("Username dan Password salah!");
}
</script>
<body>
<center>
<div id="Login">
 <font color="white" size="5" face="berlin sans FB">Login To Your Account</font>
</div>
<div id="Form-Login">
 <form name="login">
  <br><table border="1">
   <tr>
    <td><font color="white" size="4">Username :</font><br>
    <input placeholder="username" type="text" name="username"></td>
   </tr>
   <tr>
    <td><font color="white" size="4">Password :</font><br>
    <input placeholder="password" type="password" name="password"></td>
   </tr>
   <tr>
    <td><button class="animated infinite pulse" onClick="userlogin ()">Login</button>
  </table></center>
 </form>
</div>
</body>
</html>

CSS

#Login {
margin-top:200px;
border:solid 1px;
width:360px;
height:50px;
border-radius:10px 10px 0px 0px;
background:rgba(0,0,500,0.5)
}

#Form-Login {
border:solid 1px;
width:360px;
height:200px;
Background:rgba(0,0,300,0.2);
font-family:berlin sans fb;
}

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  z-index: -1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: #2ecc71;
  /* IE Fallback */
  background: rgba(0, 0, 500, 0.5);
  width: 100%;
  height: 100%;
}