JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body {
  padding: 5px;
/*   background-color:#fff; */
  min-height: 100%;
   background: #eee url(http://api.thumbr.it/whitenoise-361x370.png?background=edededff&noise=626262&density=17&opacity=15); 
/*     background: #eee url(http://api.thumbr.it/whitenoise-361x370.png?background=3a3a3dff&noise=d9d6d9&density=31&opacity=15); */
  
}

.app-hide-content {
    display: none;
}

.app-transition {
  transition: color 0.5s ease, border 0.5s ease;  
}


.note:before {
  position: absolute;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  width:15px;
  text-align:center;
  display:table;
  vertical-align:middle;
  font-size:11px;
  color: #ccc;
  z-index: 1100px;
  top:10px;
  right: 5px;
}

.flip-icon:hover {
  border-color: #99ccff; 
  color: #000;
}

.note {
  position:relative;
  width: 320px;
  height: 500px;  
  color: #555;
  font-size: 16px;
/*   font-family: courier, monospace;  */
  font-family: "Marker Felt", "Segoe Print", Geneva, Verdana, sans-serif;
  
  
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}

.note .front,
.note .back {
  background-color:#fff;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); 
}

.sticky-yellow {
  background-color: #ffc;  
}

.sticky-blue {
  background-color: #ccf;  
}

.sticky-green {
  background-color: #cfc;  
}

.note .front:hover,
.note .back:hover {
  border-color: #99ccff;  
}

.note .front {
  position: absolute;
  top: 0;
  left:0;
  z-index: 900;
  width: inherit;
  height: inherit;
/*   background: blue; */
  -webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation --...

JavaScript 1.7

/** @jsx React.DOM */

var NoteSettingsComponent = React.createClass({
    getInitialState: function() {
        return {show : true};
    },
    onFlipBtnClick: function(ev) {
        // first toggle show
        this.setState({show: !this.state.show});
        var self = this;
        // set timeout to revert show
        setTimeout(function(){
            self.setState({show: !self.state.show});
        },500);
        // call parent flip
        this.props.onFlip(ev);
    },
    render: function(){
        var show =  this.state.show ? 'note-settings app-transition' :
        'note-settings app-transition app-hide-content';
        return (
          <div className={show}>
            <span className="note-edit-btn"><i className="fa fa-pencil"></i></span>
            <span className="note-flip-btn" onClick={this.onFlipBtnClick}><i className="fa fa-exchange"></i></span>
          </div>
        );
    }
});

var AdditionalNotesComponent = React.createClass({
  shouldComponentUpdate: function(nextProps, nextState) {
      return nextProps.data !== this.props.data;
  },  
  render : function(){
    var lis = [];
    if(this.props.data){
        var whatIDidList = this.props.data.split(",");
        whatIDidList.forEach(function(item) {
          lis.push(<li>{item}</li>);
        });
      }
      return (
        <div className="note-section note-section-4">
          <h5 className="additional-notes">Additional notes:</h5>
          <ul>
              {lis}
          </ul>
        </div>
      );
  }
});

var BlockersComponent = React.createClass({
  shouldComponentUpdate: function(nextProps, nextState) {
      return nextProps.data !== this.props.data;
  },
  render : function(){
      var lis = [];
        if(this.props.data){
          var whatIDidList = this.props.data.split(",");       
          whatIDidList.forEach(function(item) {
          lis.push(<li>{item}</li>);
        });
      }
      return (
       <div className="note-section...