JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
            <ul>
                <li><a href=#>HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href=#>CONTACT</a></li>

            </ul>
        </div>
            <div class="icons">
        <a class="socialIcons" href="http://www.pixelfrau.com/feed" title="Subscribe to Pixel Frau" alt="Pixel Frau RSS Icon"><img src="youtube.png" /></a>
<a class="socialIcons" href="http://twitter.com/PixelFrau" title="Follow Pixel Frau on Twitter" alt="Pixel Frau Twitter Icon"><img src="twitter.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/PixelFrau" title="Like Pixel Frau on Facebook" alt="Pixel Frau Facebook Icon"><img src="fb.png" /></a>
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
            </div>

CSS

.icons {display: table; margin: 0 auto;} 
.socialIcons img {
                    height: 50px;
                    width: 50px;
                    opacity: 0.4;
                    filter: alpha(opacity=40);
                    margin-right: 10px;
                }
                .icons img {
                    position: relative;
                    display: inline;
                    margin-right: 0 auto;
                    margin-left: 0 auto;
                }

                .socialIcons img:hover {
                    opacity:1;
                }