JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root">

</div>

CSS

input {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #000;
  font-size: 1.2em
}

label {
  display: block;
  margin-bottom: 8px;
}

Babel + JSX

function App() {
  // All of the code below this line is executed on every change in state
  const [name, setState] = React.useState('');

  // Invoked on every change; any code in the render path will be reinvoked
  console.log('Rendering');

  // Any allocations in the render path will be re-allocated
  const now = new Date();

  // useEffect is not strictly needed here since we're only logging
  React.useEffect(() => {
    console.log(name);
    // ... Other effects here
  }, [name]);

  return (
    <div>
      <label>
        Your name is: {name === '' ? '(Start typing...)' : name} (
        {now.toISOString()}))
      </label>
      <input type='text' onChange={evt => setState(evt.target.value)}></input>
    </div>
  );
}

const rootNode = document.getElementById('root');
ReactDOM.createRoot(rootNode).render(<App />);