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: 70%;
	width: 70px;
	border-radius: 40px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    position: relative;
    top: 15%;
    -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

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