JSFiddle - React, Tailwind, and code Playground

by joecritch

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<div class="container">  
    <div id="app">
        
    </div>
</div>

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

SCSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
}

.superfade-enter {
	opacity: 0.01;
	transition: opacity 0.5s ease-in;
	&.superfade-enter-active {
		opacity: 1;
	}
}

.superfade-leave {
	transition: opacity 0.5s ease-in;
	opacity: 1;
	&.superfade-leave-active {
		opacity: 0.01;
	}
}

.plan-members {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	img {
		float: left;
		height: 4em;
		width: auto;
	}
}

.container {
	width: 40em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
}

.user-search-results {
	list-style: none;
	background: #fff;
	box-shadow: 0 0 20px rgba(#000, 0.2);
	li {
		padding-top: 1em;
		padding-bottom: 1em;
		padding-left: 1em;
		padding-right: 1em;
		line-height: 50px; // Match img
	}
	li+li {
		border-top: 1px solid #ddd;
	}
	img {
		margin-right: 1em;
		display: inline-block;
		vertical-align: middle;
		width: 50px;
		height: 50px;
		margin-left: 1px;
	}
}

/**
 * - Toggle Bar
 * - A toggle-able bar that has two layers, ready to hold avatars and search controls for inviting users to a plan.
 */

.toggle-bar {
	position: relative;
	overflow: hidden;
	height: 4em;
	background: #ccc;
	border: 1px solid #ccc;
}

.toggle-bar__drawer {
	-webkit-transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform 0.2s ease;
	position: absolute;
	left: -4em;
	top: 0;
	width: 100%;
	height: 100%;
	.toggle-bar.is-open & {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

.toggle-bar__inner {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.2s ease;
	background: #999;
	display: -webkit-flex;
	.toggle-bar.is-open & {
		-webkit-transform: translate3d(4em, 0, 0);
	}
}

.toggle-bar__btn {
	background: #000;
	height: 4em;
	width: 4em;
	color: #fff;
	line-height: 4em;
	text-align: center;
}

.toggle-bar__body {
	-webkit-flex: 1;
}

/**
 * - User Search
 * - Search input with suggestions
 */

.user-search {

}

.user-search__input {
	width: 100%;
	box-sizing:...

JavaScript 1.7

/** @jsx React.DOM */

var ToggleBar = React.createClass({
  getInitialState: function() {
    return {
      isOpen: false
    }
  },
  handleBtnClick: function() {
    var isOpen = !this.state.isOpen;
    this.setState({
      isOpen: isOpen
    });
    if(typeof this.props.onToggle === 'function') {
      this.props.onToggle({
        isOpen: isOpen
      });
    }
  },
  render: function() {
    var classes = React.addons.classSet({
      'toggle-bar': true,
      'is-open': this.state.isOpen
    });
    return (
      <div className={classes}>
        {this.props.bottomLayer}
        <div className="toggle-bar__drawer">
          <div className="toggle-bar__inner">
            <div className="toggle-bar__btn" onClick={this.handleBtnClick}>
              <span className="fa fa-plus">+</span>
            </div>
            <div className="toggle-bar__body">
              {this.props.openLayer}
            </div>
          </div>
        </div>
      </div>
    );
  }
});

var UserSearch = React.createClass({
  getInitialState: function() {
    return {
      value: ''
    };
  },
  focusInput: function() {
    this.refs.input.getDOMNode().focus();
  },
  handleInputChange: function(event) {
    var value = event.target.value;
    this.setState({
      value: value
    });
  },
  render: function() {
    var value = this.state.value;
    return (
      <div className="user-search">
        <input className="user-search__input" ref="input" type="text" value={value} onChange={this.handleInputChange} placeholder="Find a person" />
      </div>
    );
  }
});

var InviteBar = React.createClass({
  handleToggleBarToggle: function(data) {
    if(data.isOpen) {
      this.refs.userSearch.focusInput();
    }
  },
  render: function() {
    var userSearch = <UserSearch ref="userSearch" />;
    return (
      <ToggleBar onToggle={this.handleToggleBarToggle} openLayer={userSearch} />
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
     ...