JSFiddle - React, Tailwind, and code Playground

by brasofilo

HTML

<h3 class="fiddle-header">ref: <a href="http://stackoverflow.com/q/7415872/1287812" target="_blank">SO 7415872</a></h3>
<p>
<img src="http://i.stack.imgur.com/aYRM8.png" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert1" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert2" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert3" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert4" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert5" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert6" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert7" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert8" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert9" />
<img src="http://i.stack.imgur.com/aYRM8.png" class="invert10" />
</p>
<p>
<img src="http://i.stack.imgur.com/avg81.png" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert1" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert2" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert3" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert4" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert5" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert6" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert7" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert8" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert9" />
<img src="http://i.stack.imgur.com/avg81.png" class="invert10" />
</p>

CSS

body { 
    background: black; 
    margin-top: 50px;
}
.invert1 { -webkit-filter: invert(10%); }
.invert2 { -webkit-filter: invert(20%); }
.invert3 { -webkit-filter: invert(30%); }
.invert4 { -webkit-filter: invert(40%); }
.invert5 { -webkit-filter: invert(50%); }
.invert6 { -webkit-filter: invert(56%); }
.invert7 { -webkit-filter: invert(70%); }
.invert8 { -webkit-filter: invert(80%); }
.invert9 { -webkit-filter: invert(90%); }
.invert10 { -webkit-filter: invert(100%); }
.fiddle-header {
    background-color: #ccc;
    margin:0 0 10px 0;
    text-align: left;
    color: #fff;
    font-family: sans-serif;
    position: fixed;
    top:50px;
    right:0;
    z-index:999;
    width:160px;
    padding-left: 5px;
    color: #eee
}
.fiddle-header a {
    text-decoration: none;
    color: #eee
}
p:nth-of-type(2) img {
    width: 32px;
    height: 32px
}
}