JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<div class="row">
					<div class="print">
						<div class="circle">
							<img class="imgTool" src="img/print.png" alt="print">
						</div>
						<h2 class="down-circle-head">Print design</h2>
						<p class="down-circle-p">Excepteur sint occaecat <br> cupidatat non proident, sunt in<br> culpa qui officia</p>
					</div>
					<div class="web">
						<div class="circle">
							<img class="imgTool" src="img/web.png" alt="web">
						</div>
						<h2 class="down-circle-head">Web design</h2>
						<p class="down-circle-p">Excepteur sint occaecat <br> cupidatat non proident, sunt in<br> culpa qui officia</p>
					</div>
					<div class="app">
						<div class="circle">
							<img class="imgTool" src="img/app.png" alt="app">
						</div>
						<h2 class="down-circle-head">App design</h2>
						<p class="down-circle-p">Excepteur sint occaecat <br> cupidatat non proident, sunt in<br> culpa qui officia</p>
					</div>
					<div class="pensil">
						<div class="circle">
							<img class="imgTool" src="img/pensil.png" alt="pensil">
						</div>
						<h2 class="down-circle-head">Logo design</h2>
						<p class="down-circle-p">Excepteur sint occaecat <br> cupidatat non proident, sunt in<br> culpa qui officia</p>
					</div>
			</div>
		</div>

SCSS

.print {
	padding-left: 0!important;
}

.print, .web, .app, .pensil {
	@include make-lg-column(1);
	text-align: center;
	padding: 0!important;
}

.circle {
	width: 151px;
	height: 151px;
  border-radius: 151px;
  border: 1px solid #C9C9C9;
  margin: 0 auto;
   margin-bottom: 30px;
}

.down-circle-head {
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 20px;
	color: #3b434c;
}

.down-circle-p {
	font-size: 14px;
  line-height: 1.857;
	color: #3b434c;
	padding-bottom: 105px;
}

.imgTool {
	padding-top: 45px;
}