JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.circle
{
	border:4px solid red;
	height: 70px;
	width: 70px;
	border-radius: 40px;
   position:relative;
    margin:10px auto;
   display:inline-block;
}

.row
{
	border:4px solid black;
	height: 100px;
	width: 700px;
	margin: 10px;
    text-align:center;
    position:relative;
}