JSFiddle - React, Tailwind, and code Playground

by stichoza

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container without-hack">
    <pre>Without:</pre>
    <ul class="list-inline text-center">
        <li>	<a href="https://www.digitalocean.com/?refcode=de545099a697">
				<img alt="Digital Ocean" src="http://stichoza.com/images/techs/digitalocean.png"/>
			</a>

        </li>
        <li>	<a href="http://git-scm.com/">
				<img alt="Git SCM" src="http://stichoza.com/images/techs/git-scm.png"/>
			</a>

        </li>
        <li>	<a href="http://github.com/">
				<img alt="GitHub" src="http://stichoza.com/images/techs/github.png"/>
			</a>

        </li>
        <li>	<a href="http://nodejs.org/">
				<img alt="Node.JS" src="http://stichoza.com/images/techs/node.png"/>
			</a>

        </li>
        <li>	<a href="http://www.mongodb.com/">
				<img alt="MongoDB" src="http://stichoza.com/images/techs/mongodb.png"/>
			</a>

        </li>
        <li>	<a href="http://redis.io/">
				<img alt="Redis" src="http://stichoza.com/images/techs/redis.png"/>
			</a>

        </li>
    </ul>
</div>
<div class="container with-hack">
    <pre>With hack (<b>backface-visibility</b> & <b>transform<b>):</pre>
    <ul class="list-inline text-center">
        <li>	<a href="https://www.digitalocean.com/?refcode=de545099a697">
				<img alt="Digital Ocean" src="http://stichoza.com/images/techs/digitalocean.png"/>
			</a>

        </li>
        <li>	<a href="http://git-scm.com/">
				<img alt="Git SCM" src="http://stichoza.com/images/techs/git-scm.png"/>
			</a>

        </li>
        <li>	<a href="http://github.com/">
				<img alt="GitHub" src="http://stichoza.com/images/techs/github.png"/>
			</a>

        </li>
        <li>	<a href="http://nodejs.org/">
				<img alt="Node.JS" src="http://stichoza.com/images/techs/node.png"/>
			</a>

        </li>
        <li>	<a href="http://www.mongodb.com/">
				<img alt="MongoDB" src="http://stichoza.com/images/techs/mongodb.png"/>
			</a>

     ...

SCSS

/* dis shit: */
.with-hack img {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

/* other */
.container ul li img {
    max-height: 50px;
    margin: 15px 7px;
    opacity: 1;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.container:hover ul li img {
    opacity: 0.6;
}
.container ul li a:hover img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}