JSFiddle - React, Tailwind, and code Playground

HTML

<BODY>
oi
<section class="compartilhar">

<figure>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.guaraparivirtual.com.br" title="Compartilhar no Facebook">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/647404-share-256.png" >
    </a>
</figure>

<figure>
    <a href="https://twitter.com/intent/tweet?url=http://www.guaraparivirtual.com.br&text=Guarapari%20Virtual" title="Compartilhar no Twitter">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/647404-share-256.png">
    </a>
</figure>

<figure>
    <a href="https://plus.google.com/share?url=http://www.guaraparivirtual.com.br" title="Compartilhar no Goole Plus">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/647404-share-256.png">
    </a>
</figure>

<figure>
    <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.guaraparivirtual.com.br&title=Guarapari%20Virtual" title="Compartilhar no LinkEdin">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/647404-share-256.png">
    </a>
</figure>

<figure>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.guaraparivirtual.com.br" title="Compartilhar no Tumblr">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/647404-share-256.png">
    </a>
</figure>

<figure>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.guaraparivirtual.com.br" title="Compartilhar no Pinterest">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/647404-share-256.png">
    </a>
</figure>

</section>
</BODY>

CSS

section.compartilhar{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  background-color: #D6E6F0;
}

section.compartilhar figure{
  width: 16.66666666666667%;
}

section.compartilhar figure img{
  max-height: 40px;
  margin-left: 50%;
  padding: 5px;
  box-sizing: border-box;
}