JSFiddle - React, Tailwind, and code Playground

HTML

<div class="align-contents">
							<div class="profile align">
								<div class="PP"></div>
								<div class="status"></div>
							</div>
							<div class="profile align">
								<div class="PP"></div>
								<div class="status"></div>
							</div>
							<div class="profile align">
								<div class="PP"></div>
								<div class="status"></div>
							</div>
							<div class="profile align">
								<div class="PP"></div>
								<div class="status"></div>
							</div>
						</div>

CSS

.align-contents{
    width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.profile.align{
    display: inline-block;
    position:relative;
    margin:auto auto;
}
.profile{
    text-align:center;
    height:auto;
}
.profile.align .PP{
    width:60px;
    height:60px;
    border:solid 3px #FFF;
    -moz-border-radius:200px; 
    -webkit-border-radius:200px; 
    border-radius:200px;
    position:relative;
    z-index:1;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    background-image:url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status{
    width:20px;
    height:20px;
    right:0px;
    position:absolute;
    bottom:0px;
    border:solid 3px #FFF;
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    border-radius:20px;
    background:blue;
    z-index:2;
}