JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}