JSFiddle - React, Tailwind, and code Playground

by alanhogan

HTML

<p>
There should appear to be no text between these brackets: &lt;<span class="transparent">invisible</span>&gt;.
</p>

<div class="screenshot">
    <img src="http://f.cl.ly/items/060a3T3j1D230g1J2b2Y/Screen%20Shot%202012-05-18%20at%2011.24.43%20AM.png" />
    <p>This demo in real IE8.</p>
</div>

<div class="screenshot">
    <img src="http://f.cl.ly/items/2u0i0H073H3W2h121j0v/Screen%20Shot%202012-05-18%20at%2011.40.49%20AM.png" />
    <p>This demo in IE9’s IE8 mode.</p>
</div>

CSS

body {
    color: black;
    background: white none;
}
.transparent {
    color: transparent;
}

.screenshot {
    margin: 1em;
    border: 3px solid #ddd;
    color: #888;
}
.screenshot p { font-style: italic; }

JavaScript

// Transparent text color demo.