JSFiddle - React, Tailwind, and code Playground

HTML

<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="app"></div>

Babel + JSX

const letters = {
  щ: 'shh', ш: 'sh', ч: 'ch', ц: 'cz', ю: 'yu', я: 'ya',
  ё: 'yo', ж: 'zh', ъ: '``', ы: 'y`', э: 'e`', а: 'a',
  б: 'b', в: 'v', г: 'g', д: 'd', е: 'e', з: 'z', и: 'i',
  й: 'j', к: 'k', л: 'l', м: 'm', н: 'n', о: 'o', п: 'p',
  р: 'r', с: 's', т: 't', у: 'u', ф: 'f', х: 'x', ь: '`',
};

class App extends React.Component {
  state = {
    value: '',
    translitValue: '',
  }

  onChange = ({ target: { value } }) => {
    this.setState({
      value,
      translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
    });
  }

  render() {
    const { value, translitValue } = this.state;

    return (
      <div>
        <div><input value={value} onChange={this.onChange} /></div>
        <div><input value={translitValue} readOnly /></div>
      </div>
    );
  }
}

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