JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
 <center>
 <div class="imgWrapper">
    <img src="http://lorempixel.com/500/300/">
 </div>
 </center>
</div>

CSS

.wrapper {
  position: relative;
  background:#777;
  width:100%;
  height:400px;
  display:block;
  }

.imgWrapper {
  width:100%;
  max-width:500px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform:translateX(-50%);
  }
  
.imgWrapper img {
  width:100%;
  }