JSFiddle - React, Tailwind, and code Playground
HTML
<section id="services">
<!-- Services Starts Here -->
<div class="wrapper">
<h2>SERVICES</h2>
<div class="divider"></div>
<div class="row">
<div class="col-3 column">
<h3>Consulting and audit</h3>
<p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
<a href="#" class="btn btn-bottom">Read more</a>
</div>
<div class="col-3 column">
<h3>Web Development</h3>
<p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
<a href="#" class="btn btn-bottom">Read more</a>
</div>
<div class="col-3 right-align column">
<h3>Search Engine Optimization</h3>
<p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
<a href="#" class="btn btn-bottom">Read more</a>
</div>
<div class="col-3 right-align column">
<h3>Pay Per Click Management</h3>
<p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
<a href="#" class="btn btn-bottom">Read more</a>
</div>
</div>
</div>
</section>
CSS
.row {
display: flex;
flex-direction: row;
padding-bottom: 40px;
}
.col-3 {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25%;
background-color: red
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::before,
*::after {
box-sizing: border-box;
}
#services {
background-color: rgb(265, 265, 265);
color: #424242;
}
#services .col-3 {
padding: 0 20px;
}
#services .row .col-3:first-child {
margin-left: 0
}
#services .right-align {
text-align: right;
}
#services [class^="flaticon-"]:before,
#services [class^="flaticon-"]:after,
#services [class*="flaticon-"]:before,
#services [class*="flaticon-"]:after {
font-size: 60px;
margin-left: 0;
-webkit-transition: color 0.8s;
transition: color 0.8s;
}
#services [class*="flaticon"]:hover {
color: #1AC4F8
}
#sevices h3 {
margin: 10px 0
}
.btn {
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;
transition: color 0.8s, background-color 0.8s;
}