JSFiddle - React, Tailwind, and code Playground

by Steven Bey

HTML

<div id="login">
<div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>Login</h5>
                                </div>
                                <div class="ibox-content">
                                    <div>
                                        <form class="m-t" role="form" action="/Login/Teacher" method="post" enctype="multipart/form-data">
                                            <input type="hidden" name="prefix" value="hol">
                                            <P>&nbsp;</P>
                                            <P>&nbsp;</P>
                                            <P>&nbsp;</P>
                                            <P>&nbsp;</P>
                                            <div class="form-group">
                                                <input id="txtStaffUsername" name="txtStaffUsername" type="text" class="form-control" placeholder="Username" required="" autocomplete="off">
                                            </div>
                                            <div class="form-group">
                                                <input name="txtStaffPassword" type="password" class="form-control" placeholder="Password" required="" autocomplete="off">
                                            </div>
                                            <button type="submit" class="btn btn-primary block full-width m-b">Login</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
</div>

CSS

#login {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index:999999;
  background-color: green;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#login .ibox {
    position: relative;
  top: 50%;
  transform: translateY(-50%);
}