A Basic Responsive login form Example

<div class="login-wrapper" id="div1">

 <img src="<?php echo site_url(); ?>/wp-content/uploads/2020/01/grahakbook_logo-294x300.png" width="100px">
<p>Manage your grahak digitally.</p>

<?php if(empty($msg)){?>

 <form method="post" action="" class="login-form">
<h3>SIGN IN</h3>
     <div class="wrap-input100 validate-input" data-validate="Enter username">
      <input class="input100" type="text" name="username">
      <span class="focus-input100" data-placeholder="Username"></span>
     </div>

     <div class="wrap-input100 validate-input" data-validate="Enter password">
      <input class="input100" type="password" name="pass">
      <span class="focus-input100" data-placeholder="Password"></span>
     </div>
     
     
     
      <input type="submit" name="login" class="login-submit" value="Log In">

     
</form>

.login-wrapper {
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
}

/* login form */

.login-form {
    margin-top: 5px;
    width: 90%;
    max-width: 300px;
}

/*  input css */


.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    background: 0 0!important;
    outline: none;
}

.input100 {
    font-size: 18px;
    color: #fff;
    line-height: 1.2;
    display: block;
    width: 100% !important;
    height: 45px;
    background: 0 0!important;
    padding: 15px 5px 0px 5px !important;
    border: none;
    outline: none;
    margin-top: 30px !important;
    border: none!important;
    font-family: -apple-system,BlinkMacSystemFont,helvetica neue,Helvetica,sans-serif;
}

/*---------------------------------------------*/
.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
   font-family:-apple-system,BlinkMacSystemFont,helvetica neue,Helvetica,sans-serif;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #fff;
}

.focus-input100::after {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  top: 15px;
  opacity:0.7;
  left: 0px;
  padding-left: 5px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus + .focus-input100::after {
  top: -10px;
  font-size: 15px;
}

.input100:focus + .focus-input100::before {
  width: 100%;
}

.has-val.input100 + .focus-input100::after {
  top: -10px;
  font-size: 15px;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}



input.login-submit {
    margin-top: 35px;
    background: #fff !important;
    color: #cd2653 !important;
    padding: 15px 20px;
    border: 1px solid #fff;
    border-radius: 100px;
    width: 100%;
 text-decoration:none;
 -webkit-appearance:none !important;
}

input.login-submit:hover,
input.login-submit:focus {
    background: transparent !important;
    color: #ffffff !important;
 text-decoration:none;
  -webkit-appearance:none !important;
}


input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.create-account-bar {
    background: #cb1f51;
    padding: 14px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.create-account-bar span
{
 color:#FF7B43;
 font-size:13px;
 text-transform:uppercase;
}


.create-account-bar span.signup,
.create-account-bar span.signin
{
 color:#fff;
}

span.signin
{
display:none; 
}

.login-wrapper p {
    margin-top: 12px;
    color: #fff;
    font-size: 13px;
}

.login-wrapper h3 {
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 0px;
    margin-top: 15px;
 text-align:center;
}