JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
   <div class="img">
    P
   </div>
</div>

CSS

.parent {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 3px solid #000;
  position: relative;
  text-align: center;
}

.img {
  width: 50px;
  height: 50px;
  position: absolute;
 margin: 0 auto;
  left: 0;
  right: 0;
  border: 2px solid red;
  bottom: 0;
}