JSFiddle - React, Tailwind, and code Playground
HTML
<div class='landing-section2'>
<div class='container'>
<div class='row'>
<div class='col-sm-4 landing-section2-pillar'>
<div>
<div class='landing-icon'>
@
</div>
<h3>
Section 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.
</p>
</div>
</div>
<div class='col-sm-4 landing-section2-pillar'>
<div>
<div class='landing-icon'>
@
</div>
<h3>
Section 2
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.
</p>
</div>
</div>
<div class='col-sm-4 landing-section2-pillar'>
<div>
<div class='landing-icon'>
@
</div>
<h3>
Section 3
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.
</p>
</div>
</div>
</div>
</div>
</div>
CSS
.landing-section2 {
padding: 50px;
background-color: #2c2c2c;
text-align: center;
}
.landing-section2 .col-sm-4 > div {
border: 1px solid #357ca3;
padding: 20px;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.landing-section2 h3 {
color: white;
margin-top: 30px;
}
.landing-section2 p {
color: #ccc;
}
.landing-section2 .landing-icon {
color: #357ca3;
font-size: 3em;
background: #2c2c2c;
z-index: 1000;
position: absolute;
top: -20px;
padding-left: 10px;
padding-right: 10px;
left: calc(50% - 32px);
}