JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.j"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<div id = "container">

</div>

Babel + JSX

// Web components and React
 // https://facebook.github.io/react/docs/web-components.html
 // Fiddle based on https://github.com/facebook/react/blob/master/examples/webcomponents/index.html
 
 (function(){
   // Define WebComponent
  var proto = Object.create(HTMLElement.prototype, {
    attachedCallback: {
      value: function() {
        var mountPoint = document.createElement('span');
        this.createShadowRoot().appendChild(mountPoint);

        var name = this.getAttribute('name');
        var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
        ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
      }
    }
  });
  document.registerElement('x-search', {prototype: proto});

  // Define React Component
  class HelloMessage extends React.Component {
    render() {
      return <div>Hello <x-search name={this.props.name} />!</div>;
    }
  }

  // Mount React Component (which uses WebComponent which uses React)
  var container = document.getElementById('container');
  ReactDOM.render(<HelloMessage name="Jim Sproch" />, container);
}())