JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
    <link type="text/css" rel="stylesheet" href="/tiendaVirtual/css/init.css" /></head><body>
    <div id="page">
        <div id="header">
            //Header content
        </div>
        <div id="content">
            <div id="dvLogin">
                <div id="pnlLogin" class="ui-panel ui-widget ui-widget-content ui-corner-all pnlLogin" data-widget="widget_pnlLogin">
                    <div id="pnlLogin_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
                        <span class="ui-panel-title">Login</span>
                    </div>
                    <div id="pnlLogin_content" class="ui-panel-content ui-widget-content">
                    </div>
                <div>
            </div>
        </div>
        
    </div><div id="footer">
            //Footer content
        </div>
    </body>
</html>

CSS

#page > div, #dvLogin{border:1px solid red}


#content {
  text-align: center;
   
}
 
#content:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
    
  /* For visualization 
  background: #808080; width: 5px;
  */
 }
 
#dvLogin {
  display: inline-block;
  vertical-align: middle;
  width: 500px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f00;
 }



body{
    font-size: 12px !important;
}

html, body{height:100%;}
#page{
    width: 100%;
    height: 100%;    
}

#header{
    height: auto;
     
}

#content{
    height: 100%;
    display: block;

}

/*
#footer{
    height: auto !important;
    position: absolute; 
    width: 100%; 
    bottom: 0;
}*/
.dvLogin{
    vertical-align: middle;
    height: 660px !important;
}

.pnlLogin{
    width: 500px;
    margin: auto auto !important;
}

#pnlFooter{
    margin-bottom: 10px !important