JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
            <div class="item" id="top-left"><p>Top Left</p></div>
            <div class="item" id="top-right"><p>Top Right</p></div>
            <div class="item" id="center"><p>Center</p></div>
            <div class="item" id="bottom-left"><p>Bottom Left</p></div>
            <div class="item" id="bottom-right"><p>Bottom Right</p></div>
        </div>

CSS

.wrapper {
            width: auto;
            height: 10em;
            background-color: red;
            position: relative;
        }
        .item {
            width: 4em;
            height: 4em;
            background-color: black;
            position: absolute;
            display: inline-block;
            color: white;
        }
        .item p {
            text-align: center;
            vertical-align: middle;
        }
        #top-right {
            right: 0em;
        }
        #center {
          top:50%;
          left:50%;
          transform:translate(-50%,-50%);
          -moz-transform:translate(-50%,-50%);
          -webkit-transform:translate(-50%,-50%);
          -o-transform:translate(-50%,-50%);
          -ms-transform:translate(-50%,-50%);
            //top: calc(50% - 2em);
            //right: calc(50% - 2em);
        }
        #bottom-left {
            bottom: 0em;
            left: 0em;
        }
        #bottom-right {
            right: 0em;
            bottom: 0em;
        }