JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexcontainer">
<div class="box clear img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>

<div class="box">
  <input type="text" placeholder="username">
  <br>
  <input type="password" placeholder="password">  
  <br>
  <button>submit</button>
</div>
<div class="box">
    <button>password reset</button>
    <br>
    <button>register</button>
</div>

</div>

CSS

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;    
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    
    /*iPhone 4*/
    height: 100%;
    width:100%;
    /*iPhone 6*/
    /*height: 667px;
    width:375px;*/
    
    background-color: blue;
    border: 1px solid red;
}

.box {
  text-align:center;
    height: auto;
    width: 100%;
    background-color: green;
    border: 1px solid pink;
    margin: 3px;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:20px;
    margin-bottom:20px;
}

.box.clear {
    background-color: transparent;
    border: none;
    margin-bottom: 0;
    display:table-cell; 
    vertical-align:middle; 
    text-align:center;
}

.img-container{
  text-align:center;
}