JSFiddle - React, Tailwind, and code Playground

by Xesued

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<body>
  <div id="node">Hi</div>
  
  <div id="native" style="width: 90px; height: 30px; border: 1px solid blue">
    <button id="button">Link</button>
  </div>

  <script type="text/babel">
  	class Link extends React.Component {
    
  		constructor(props) {
       	super(props);
    		this.state = {clicked: false};
      }
     
      handleMouseDown () {
        console.log('oh ya');
      	this.setState({clicked: !this.state.clicked});
      }
      
      render () {
        console.log('render');
        return (
        	<div
          		style={{width: 90, height: 30, border: '1px solid blue'}}
          		onMouseDown={ () => this.handleMouseDown() }
        			onMouseUp={ () => {console.log('Mouse Up'); } }
            	onClick={ () => { console.log('Click'); } }>
        		{ (this.state.clicked) ? <a href="javascript://" style={{color:'red'}}>Link</a> : <button>Link</button> }
            { (this.state.clicked) ? 'ON' : 'OFF' }
          </div>
      	);
      }
    }
    
		ReactDOM.render(<Link />, node);
	</script>


  <script>
  	var nativeNode = document.getElementById('native');
    var nativeClicked = false;
 
    
    nativeNode.addEventListener('mousedown', function () {
    	console.log('Native mouseDown');
    	nativeNode.innerHTML = '';
      
      nativeClicked = !nativeClicked;
      if (nativeClicked) {
      	var linkNode = document.createElement('a');
        linkNode.innerHTML = 'Link';
        nativeNode.appendChild(linkNode);
      }
      else {
      	var buttonNode = document.createElement('button');
        buttonNode.innerHTML = 'Link';
        nativeNode.appendChild(buttonNode);
      }
    });
    
    nativeNode.addEventListener('click', function () {
    	console.log('Native: clicked');
    });
    
   ...