JSFiddle - React, Tailwind, and code Playground

by jung kyunghwan

HTML

<script src="https://fb.me/react-with-addons-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id='app'></div>

JavaScript 1.7

var Main = React.createClass({

  //floatButtonSetting
  FBS:{
    //autoSetting please don't touch
    showFlag:false,
    isFirst : true,
    tag : {},
    target : {},
    top : 0,
    left : 0,
    childrenLength : 0,
    //userSetting
    buttonDistance : 80,
    speed :300,
    buttonStyle:{
      width:60,
      height:60,
      fontSize:30
    },
    labelSetting:{
      labelStyle:{color:'#4dd0e1'},
      labelPostion:'left',
      labelDistance:160
    },
    //up down right left effect
    effect:'up'
  },
  actionChildren1(){
    console.log('actionChildren1');
  },
  actionChildren2(){
    console.log('actionChildren2');
  },
  render(){
    return(
      <div>
        <div id='floatingPostion' style={{width:1,height:1,position:'fixed',bottom:200,right:200}}></div>

        <FloatingButtonContainer targetId='floatingPostion'>
        {/*only one mainButton */}
          <FloatingButtonMain
            style={this.FBS.buttonStyle}
            FBS={this.FBS}
            />
        {/*max 99*/}
          <FloatingButtonChildren
            style={this.FBS.buttonStyle}
            iconClass='fa fa-cog' onClick={this.actionChildren1}
            label='Setting'
            labelStyle={this.FBS.labelSetting.labelStyle}
            labelPostion={this.FBS.labelSetting.labelPostion}
            labelDistance={this.FBS.labelSetting.labelDistance}
            />
          <FloatingButtonChildren
            style={this.FBS.buttonStyle} iconClass='fa fa-wrench' onClick={this.actionChildren2}
            label='Ranch'
            labelStyle={this.FBS.labelSetting.labelStyle}
            labelPostion={this.FBS.labelSetting.labelPostion}
            labelDistance={this.FBS.labelSetting.labelDistance}
            />
        </FloatingButtonContainer>
      </div>
    );
  }
})

/*components*/
var FloatingButtonContainer = React.createClass({
  getInitialState() {
    return {
      position: {
        top:0,
        left:0
      }
    };
  },
  componentDidMount(){
...