JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/built/bundle.js"></script>
<script src="https://unpkg.com/[email protected]/built/bundle.js"></script>
<div id='react-dom'></div>

Babel + JSX

// import { observable } from 'dob'
// import { Provider, Connect } from 'dob-react'

@observable
class UserStore {
    name = 'bob'
}

class UserAction {
    store = new UserStore()

    @Action setName (name: string) {
        this.store.name = name
    }
}

@Connect
class App extends React.Component {
    render() {
        return (
            <span>
              {this.props.store.name}
              <button onClick={ () => {
              	this.props.action.setName("jack")
              }}>updateName</button>
            </span>
        )
    }
}

const userAction = new UserAction()

ReactDOM.render(
    <Provider action={userAction} store={userAction.store}>
        <App />
    </Provider>
, document.getElementById('react-dom'))