JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<div class="wrapper">
<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>

CSS

.wrapper {
    width: 600px;
    margin: 0 auto;
}

a.socialIcons:not(:first-child) {
margin-left: 10px;
}

img {
    margin: 0;
    padding: 0;
}

a.socialIcons:hover {
opacity: .8;
filter:alpha(opacity=80);

}