JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<section id="sessao-1">
    <h1>Porque nos escolher</h1>
    <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
    <ul class="info">
        <li>
            <a href="#">
                <i class="fa fa-code"></i>
                <h3 class="titulo">Codigo Semantico</h3>
            </a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </li>
        
        <li>
            <a href="#">
                <i class="fa fa-heart"></i>
                <h3 class="titulo">Layout responsivo</h3>
            </a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </li>
        
        <li>
            <a href="#">
                <i class="fa fa-plus"></i>
                <h3 class="titulo">Otima qualidade</h3>
            </a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </li>
    </ul>
</section>

CSS

#sessao-1 {
    text-align: center;
    color: #000;
    font-family: Gabriola;
}
#sessao-1 h1 {
    font-size: 3em;
}
#sessao-1 #texto-sessao {
    width: 550px;
    max-width: 85%;
    margin: -30px auto;
    font-size: 1.1em;
}
.titulo {
    margin: 0;
}
.info {
    margin: 70px auto;
    padding: 0;
    text-align: center;
}
.info p {
    text-align: center;
    font-size: 1.1em;
}
.info li {
    display: inline-block;
    width: 180px;
    /* ou se preferires - width: 33.33333%; - este valor significa: 100 a dividir por 3 divs = 33.33333 . 100% Ă© o tamanho total da largura do documento */
    vertical-align:top;
    border:1px solid #000;
}
.info .fa {
    color: #222;
    font-size: 2em;
    line-height: 35px;
    width: 35px;
    height: 35px;
    padding: 5px;
    margin: 10px 0;
    border: 2px solid #222;
    border-radius: 50%;
}

@media only screen and (max-width: 600px) {
    .info li {
        width: 100%;
        margin:10px 0;
    }
}