JSFiddle - React, Tailwind, and code Playground

by Jakub Kosiński

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.4/mocha.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.4/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script>
<header>
  <h1>
      React Koans by
      <span>Arkency</span>
    </h1>
</header>
<div id="mocha"></div>
<div id="messages"></div>
<div id="fixtures"></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  font-size: 27px;
  color: #444444;
  font-weight: 700;
}
h1 span {
  font-weight: 400;
}

input[type="text"] {
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:focus,
input[type="text"].focus {
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}

button {
  border: 0 none;
  margin-left: 5px;
  border-radius: 2px 2px 2px 2px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 0;
  margin-top: 10px;
  padding: 7px 10px;
  text-transform: none;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  width: 16.795%;
  text-align: center;
  background: none repeat scroll 0 0 #999999;
  color: #FFFFFF;
}
button:hover {
  background: none repeat scroll 0 0 #444444;
  color: #FFFFFF;
}
button[disabled] {
  opacity: 0.5;
}
.tabs input[type=radio] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs {
  width: 80%;
  position: relative;
  padding: 0;
  margin: 40px auto;
}
.exercise{
  float: left;
  padding-top: 5px;
  margin-right: 3px;
}
ul.tabs>li {
  list-style-type: none;
}
.tabs label {
  display: block;
  padding: 10px 20px;
  border-radius: 2px 2px 0 0;
  color: white;
  font-size: 15px;
  font-weight: normal;
  background: #C41D47;
  cursor: pointer;
  position: relative;
  top: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
  background: #444444;
  top: 0;
}

[id^=tab]:checked + label {
  background: #444444;
  color: white;
  top: 0;
}

[id^=tab]:checked ~ [id^=tab-content] {
  display: block;
}
.tab-content{
  z-index: 2;
 ...

Babel + JSX

// This is really simple React Component.
// It has its own name (HelloWorld) it will be used for things like error display.
//
// Task: Render HTML span with "Hello World" text.

class HelloWorld extends React.Component {
  // All components *must* have a `render` method defined.
  //
  // To define a component's render method, we use syntax called JSX. As you
  // can see it looks similar to HTML. You can use normal JavaScript too, but
  // JSX is much more popular, so we will stick to it. JSX gets converted to
  // JavaScript code. It is here just for readability purposes.
  //
  // Note: You can read about `render` syntax here:
  // https://facebook.github.io/react/docs/displaying-data.html
  //
  // Warning! JSX is not HTML - in the following lessons you will notice the differences.
  //
  // React delivers a big set of standard HTML elements like `div`, `p`,
  // `canvas` etc. Here you can see usage of a `div` element.

  render() {
    return (
        <div>FILL ME IN!</div>
    );
  }
}

// Note:
// You can use the official Google Chrome extension to browse all ReactJS
// components rendered on a single page. See the description here:
// https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html

/* Hello World tests DO NOT MODIFY LINES BELOW! */
mocha.setup('bdd');

describe("01 - HelloWorld", () => {
	const assert = chai.assert;
  var component;

  beforeEach( () => {
    var elem = document.createElement('div');
    elem = document.body.appendChild(elem);
    return component = React.render(React.createElement(HelloWorld), elem);
  });

  afterEach( () => {
    React.unmountComponentAtNode(React.findDOMNode(component));
  });

  it("should complete all tasks", () => {
    var divTags = React.addons.TestUtils.scryRenderedDOMComponentsWithTag(component, 'div');
    var spanTags = React.addons.TestUtils.scryRenderedDOMComponentsWithTag(component, 'span');

    assert.equal(divTags.length == 0, true, "Your React component shouldn't...