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-style: solid;
	border-color: red;
	height: 70px;
	width: 70px;
	border-radius: 40px;
    display: inline-block;
    margin: 2px;
}

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