JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var MaterialButton = React.createClass({
    getInitialState: function(){
        return { state: 'default' };
    },
    onClick: function(){
        this.props.onClick && this.props.onClick();
        this.setState({state: 'active'});
        setTimeout(function(){ 
           this.setState({state: 'out'});
           setTimeout(function(){
             this.setState({state: 'default'});
           }.bind(this), 100);
        }.bind(this), 100);
    },
    onMouseDown: function() {
        this.setState({state: 'pressed'});
    },
    render: function() {
        var state = this.state.state;
        var buttonStyle = _.extend({},
            styles.button,
            state === 'pressed' && styles.pressed
        );
        var rippleStyle = _.extend({},
            styles.ripple,
            state === 'active' && styles.rippleActive,
            state === 'out' && styles.rippleOut
        );
        return (
            <button style={buttonStyle}
              onMouseDown={this.onMouseDown}
              onClick={this.onClick}
              type="button">
              +
              <span style={rippleStyle}></span>
            </button>
        );
    }
});

var styles = {
    button: {
        position: 'relative',
        border: 'none',
        outline: 'none',
        color: 'white',
        borderRadius: 56,
        boxShadow: '0 3px 10px rgba(0, 0, 0, 0.23)',
        backgroundColor: '#d23f31',
        fontSize: 18,
        height: 56,
        width: 56,
        transition: '100ms all ease'
    },
    pressed: {
        backgroundColor: '#ab3125',
        boxShadow: '0 8px 17px 0 rgba(0, 0, 0, 0.1)'
    },
    ripple: {
        position: 'absolute',
        top: 0,
        left: 0,
        height: '100%',
        width: '100%',
        borderRadius: '100%',
        display: 'block',
        background: 'rgba(255,255,255,0.2)',
        transform: 'scale(0)',
        
    },
    rippleActive: {
        transform: 'scale(1)',
        transition: '100ms...