JSFiddle - React, Tailwind, and code Playground

HTML

<div style="max-width:600px">
    <ul>
        <li>
            <div class="box-parent">
                <div class="box"></div>
            </div>
        </li>
        <li>
            <div class="box-parent">
                <div class="box"></div>
            </div>
        </li>  
        <li>
            <div class="box-parent">
                <div class="box"></div>
            </div>
        </li>
    </ul>
</div>

CSS

ul {
    list-style: none;
    text-align: center;
}

ul > li {
    display: inline-block;
    width: 28%;
    margin-right: 2%;
    vertical-align: top;
}

.box-parent {
	width:95%;
	padding-bottom:95%;
	height:0;
	position:relative;

}

.box {
	border-radius: 10%;
	width:100%; 
	height:100%;
	position:absolute;
	left:0;
	background-color:rgb(17, 17, 17);
	color: #ffffff;
	text-align: center;
	
}