JSFiddle - React, Tailwind, and code Playground

by kazabr

HTML

<script src="http://designmodo.com/demo/ecommerce-css3/img/cart-icon.png"></script>
<script src="http://designmodo.com/demo/ecommerce-css3/img/eye-icon.png"></script>
<ul id="footer-logos">
    <li><a href="#"><img src="http://designmodo.com/demo/ecommerce-css3/img/cart-icon.png" alt="Cart" /></a></li>
    <li><a href="#"><img src="http://designmodo.com/demo/ecommerce-css3/img/eye-icon.png" alt="Eye" /></a></li>
</ul>

CSS

*{
    margin: 0;
    padding: 0;
}

body {
    background: #222;
}

#footer-logos {
    text-align: center;
}

#footer-logos li {
    display: inline;
    padding-left: 3px;
}

#footer-logos a img {
    opacity: 0.25;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

#footer-logos a:hover img,
#footer-logos a:focus img {
    opacity: 0.6;
}