JSFiddle - React, Tailwind, and code Playground

HTML

<h3 style="text-align: center;">Hello World</h3>

<p style="color:#919396;text-align: center;font-size:medium;">Hello, How are you ? Hello World</p>


<div class="squares">
        <div class="square"><img src="https://thebettersoftwarecompany.com/staging/wp-content/uploads/2018/05/Layer_46.png" alt="" width="67" height="67" class="aligncenter size-full wp-image-7371" /><p style=" font-size: 15px;
  font-family: 'Roboto';line-height:1.2;
  color: rgb(58, 59, 60);">Franchise Hub Hierarchy</p></div>
<div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
        <div class="square"><img src="https://thebettersoftwarecompany.com/staging/wp-content/uploads/2018/05/Layer_30.png" alt="" width="76" height="60" class="aligncenter size-full wp-image-7369" /><p  style=" font-size: 15px;
  font-family: 'Roboto';line-height:1.2;
  color: rgb(58, 59, 60);">System wide user permissions</p></div>
<div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
        <div class="square"><img src="https://thebettersoftwarecompany.com/staging/wp-content/uploads/2018/05/Layer_47.png" alt="" width="55" height="55" class="aligncenter size-full wp-image-7372" /><p  style=" font-size: 15px;
  font-family: 'Roboto';line-height:1.2;
  color: rgb(58, 59, 60);">Custom Corporate Branding</p></div>
<div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
        <div class="square"><img src="https://thebettersoftwarecompany.com/staging/wp-content/uploads/2018/05/Shape_33.png" alt="" width="57" height="63" class="aligncenter size-full wp-image-7373" /><p  style=" font-size: 15px;
  font-family: 'Roboto';line-height:1.2;
  color: rgb(58, 59, 60);">Configurable Workflow</p></div>
<div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
		<div class="square"><img src="https://thebettersoftwarecompany.com/staging/wp-content/uploads/2018/05/Layer_33.png" alt="" width="70"...

CSS

.squares {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
   position: relative;
    width: 70%;
    max-width: 1080px;
    overflow-x:auto;
    margin: auto;
}



.squares .square {
    width: 13%;
    min-width: 150px;
    text-align: center;
    height: 150px;
	  padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145, 147, 150);
    border-radius: 10px;
   

}

.squares .square img {
    padding-bottom: 18%;
}

.squares .square p
{

	text-align: center;
	vertical-align: text-bottom;
}


.squares .square p
{
	text-align: center;
	vertical-align: bottom;
}
.arrows {
	text-align:center;
}
.arrows span {
	display:block;
	font-size:48px;
	line-height:32px;
	color:green;
	font-weight:bold;
}
.arrows span:first-child {
	color:#C90;
}