JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loginContainer">
  <div class="loginContent">
    This div should be in the middle of the outer div
  </div>
</div>

CSS

div.loginContainer {
    width:100%;
    height:300px;
    position:absolute;
    top:50%;
    margin-top:-150px;


    background: url('bg.jpeg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    background-size: cover;
    background-color:red;
}

div.loginContent {
    margin:-135px auto 0 auto;
    height:250px;
    width:300px;
    padding:10px;
    position:relative; 
    top:50%; 

    background-color:#ffffff;
    border-radius:20px 20px 20px 20px;
        -moz-border-radius:20px 20px 20px 20px;
        -webkit-border-radius:20px 20px 20px 20px;
        -khtml-border-radius:20px 20px 20px 20px;
    box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
        -webkit-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
        -moz-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
    box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
        -webkit-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
        -moz-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
}