JSFiddle - React, Tailwind, and code Playground

by everdimension

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="react-root">
  <!-- This div's content will be managed by React. -->
</div>

<div id="root">
  <div style="display: inline-block;">
    <button disabled>disabled button</button>
  </div>
</div>

<textarea id="output" rows="10"></textarea>

CSS

body {
  padding: 1.5em;
  background-color: #fafafa;
  font-family: -apple-system,
      BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,sans-serif;
}

textarea {
  margin: 1em 0;
  width: 100%;
}

Babel + JSX

const output = document.getElementById('output');

function logMessage(str) {
  console.log(str);
  output.value = `${output.value}\n${str}`.trim();
  output.scrollTop = output.scrollHeight;
}

function App () {
  return (
    <div
      style={{ display: 'inline-block' }}
      onMouseEnter={() => logMessage('(react) mouseenter on div wrapper')}
      onMouseLeave={() => logMessage('(react) mouseleave on div wrapper')}
    >
      <button
        onMouseEnter={() => logMessage('(react) mouseenter on disabled button')}
        onMouseLeave={() => logMessage('(react) mouseleave on disabled button')}
        disabled
      >
        (react) disabled button
      </button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('react-root')
);

/**
 * adding listeners directly
 */
const wrapper = document.querySelector('#root div');
wrapper.addEventListener('mouseenter', () => logMessage('mouseenter on div wrapper'));
wrapper.addEventListener('mouseleave', () => logMessage('mouseleave on div wrapper'));

const button = document.querySelector('#root button');
button.addEventListener('mouseenter', () => logMessage('mouseout on disabled button'));
button.addEventListener('mouseleave', () => logMessage('mouseout disabled button'));