JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="dark">
  <img src="http://mealoman.com/Uploads/kakao-s-marshmellou/c_kakao-s-marshmellou.jpg" alt="">
  </div>
  <div class="light"></div>
</div>

CSS

.wrapper {
  width: 300px;
  margin: auto;
}
.dark {
  height: 200px;
  background: #eee;
}
.dark img {
  position: relative;
  left: 50%;
  top: calc(100% - 80px);
  transform: translateX(-50%);
  
}
.light {
  height: 150px;
  background: #777;
}