JSFiddle - React, Tailwind, and code Playground
HTML
<div id="iconWrapper">
<img src="img/icon3.png" />
<div class="explanation boxGreen">
<h2 class="green">IT Support</h2>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
</div>
<img src="img/icon1.png" />
<div class="explanation boxOrange">
<h2 class="orange">Communications</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
</div>
<img src="img/icon2.png" />
<div class="explanation boxBeige">
<h2 class="beige">Cloud Solutions</h2>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
</div>
</div>
CSS
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
}
#iconWrapper {
display:table;
margin-top:50px;
height:500px;
}
#iconWrapper img {
width:33.3%;
text-align:center;
}
.explanation {
width:33.3%;
text-align:left;
min-height: 200px;
margin: 0 auto;
margin-top:40px;
border-radius:10px;
padding:20px;
margin:20px;
display: table-cell;
}
.boxOrange {
border:2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
border:2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
border:2px solid RGBa(137, 176, 185, .4);
}