JSFiddle - React, Tailwind, and code Playground

HTML

<div class='mainWrapper'>
    <div class="socialIcons"> TEST 
<a class="socialIcons" href="LINK" title="Facebook" alt="FB"><img src="img/Social/Facebook.png" width="100px" height="100px"  /></a>

<a class="socialIcons" href="LINK" title="Soundcloud" alt="cloud"><img src="img/Social/SoundCloud.png" width="100px" height="100px" /></a>

<a class="socialIcons" href="LINK" title="Tumblr" alt="falling"><img src="img/Social/Tumblr.png" width="100px" height="100px" /></a>

<a class="socialIcons" href="LINK" title="Vimeo" alt="VMO"><img src="img/Social/Vimeo.png" width="100px" height="100px" /></a>

<a class="socialIcons" href="LINK" title="Youtube" alt="YT"><img src="img/Social/YouTube.png" width="100px" height="100px" /></a>

</div>
</div

CSS

.mainWrapper {
    text-align:center;
}
.socialIcons {
    
}
.socialIcons:hover {
    opacity: .8;
    filter:alpha(opacity=80);
}