JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="sharesocial">

  <div id="sharecondividi">
    Condividi
  </div>
  <div id="shareicons">

    <a target="blank" href=""><span class="fa fa-twitter-square" id="twitterbt"></span></a>
    <a target="blank" href=""><span class="fa fa-google-plus-square" id="googleplusbt"></span></a>
    <a target="blank" href=""><span class="fa fa-facebook-square" id="facebookbt"></span></a>
  </div>
</div>

CSS

#sharesocial {
    background: #646464 none repeat scroll 0 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: center;
    width: 174px;
}

#sharecondividi {
    align-self: center;
    color: #fff;
    display: flex;
    text-align: center;
}

#shareicons {
    align-items: center;
    background: #f0f0f0 none repeat scroll 0 0;
    border-radius: 5px;
    display: flex;
    height: 50%;
    justify-content: space-around;
    width: 95%;
}


#twitterbt, #googleplusbt, #facebookbt {
    font-size: 40px;
}

#twitterbt {
    color: #00aced;
}

#googleplusbt {
    color: #dd4b39;
}

#facebookbt {
    color: #3b5998;
}