JSFiddle - React, Tailwind, and code Playground

by jklm313

HTML

<script src="https://dl.dropbox.com/u/32750720/works/common%20resources/prefixfree.min.js"></script>
<a id="box" href="#" class="toggle"></a>

<div class="dragon"></div>

CSS

#box {
  float: left;
  width: 200px;
  height: 200px;
}
#box:active {
    background: #333
}
.toggle {
  border: 0;
  transition: .7s;
  background: orange;
}

.active {
  background: blue;
border: 2px red dashed;
  transition: .7s;
}
.dragon {
width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  transition: .3s;
}

.active ~ .dragon {
  background: red;
}

JavaScript

// ahh! hmmmmmmm...
// js from http://codepen.io/smt/pen/oywvG

$('.toggle').on('click', function (e) {
  e.preventDefault();
  $(this).toggleClass('active');
  return false;
});