JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>

CSS

.circle
{
	border-style: solid;
	border-color: red;
	height: 70px;
	width: 70px;
	border-radius: 40px;
    float:left;
    margin: 2px;
}

.wrapper {
    display: table;
    margin: auto;
}

.row
{
	border-style: solid;
	border-color: black;
	height: 100px;
	width: 700px;
	margin: 10px;
}