JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="profile-kids">
	<li class="profile-kid">
		<img class="f" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
		<div class="kid-text">Girl</div>
	</li>
	<li class="profile-kid">
		<img class="f" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
		<div class="kid-text">Girl</div>
	</li>
	<li class="profile-kid">
		<img class="m" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
		<div class="kid-text">Boy</div>
	</li>
</ul>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul.profile-kids {
    list-style-type: none;
    padding-left: 0px;
}
li.profile-kid {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 10px;
    cursor: pointer;
}
img.f {
    z-index: 0;
    border: 10px solid rgb(254, 134, 164);
    border-radius: 75px;
    display: inline-block;
}

img.m {
    border: 10px solid rgb(120, 192, 249);
    border-radius: 75px;
    display: inline-block;
}

div.kid-text {
    background: #FFFFFF;
    text-align: center;
    width: 150px;
    font-size: 20px;
    margin-top: -100px;
    position: relative;
}