JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

class ThirdPartyCounter {
  constructor(initial = 0) {
    this.value = initial;
  }

  increment() {
    console.log("+1");
    this.value++;
  }

  decrement() {
    this.value--;
  }
}

let c = new ThirdPartyCounter(1);

function App() {
  const [count, setCount] = React.useState(5);
  return (
    <div className="App">
      <div>Class: {c.value}</div>
      <div>Hook: {count}</div>

      <button onClick={() => c.increment()}>Increment Class</button>
      <button onClick={() => setCount(c => c + 1)}>Increment State</button>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById('container'));