JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container">

  <div class="row">

    <div class="col-4 rounded p-4 bg-dark text-white">
      <div class="row">

        <div class="col-12 pb-3 text-center">
          <h6>{ LOGIN FORM }</h6>
        </div>

        <div class="col-12 pb-3">
          <input type="text" class="form-control form-control-sm text-center" placeholder="Username..." id="user" name="user" />
        </div>
        <div class="col-12 pb-3">
          <input type="password" class="form-control form-control-sm text-center" placeholder="Password..." iD="pass" />
        </div>

        <div class="col-12 pb-3">
          <input type="button" class="btn btn-success btn-sm w-100" value="ENTER" />
        </div>
<div class="col-12">
        <div class="alert alert-warning text-center" id="alarm" role="alert">Login correct...</div>
      </div>
      </div>
      
    </div>

  </div>




</div>

CSS

body {
  margin: 30px;
}

JavaScript

var sifre = "123456";
$("#alarm").hide();

$("#pass").keyup(function() {
  if ($(this).val() === sifre) {
    $("#alarm").show();
  }
});