JSFiddle - React, Tailwind, and code Playground

by joe_sky

HTML

<script src="https://unpkg.com/react@16.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/mobx@4.1.1/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/mobx-react@5.0.0/index.min.js"></script>
<script src="https://unpkg.com/nornj@0.4.12/dist/nornj.min.js"></script>
<script src="https://unpkg.com/nornj-react@0.4.4/dist/nornj-react.min.js"></script>
<script src="https://unpkg.com/nornj-react@0.4.4/dist/nornj-react-mobx.min.js"></script>
<section id="container">
  <script type="text/nornj">
    <div>
      <Container>
        <#tmpl>
          <input :#mobx-bind="inputValue" placeholder="edit me">
          <p>Message is: <i class="item">{inputValue}</i></p>
        </#tmpl>
      </Container>
    </div>
  </script>
</section>

CSS

.item {
  color: purple;
  margin-left:5px;
}

Babel + JSX

class Container extends React.Component {
  constructor(props) {
    super(props);
    
    mobx.extendObservable(this, {
      inputValue: ''
    });
  }

  render() {
    return this.props.tmpls[0](this);
  }
}

nj.registerComponent({ Container: mobxReact.observer(Container) });
njr.renderTmplTag();