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

class App extends React.Component {
  replaceLinks(str = 'Подробнее по ссылке: https://yandex.ru') {
    const reg = /[-a-zA-Z0-9@:%_\+.~#?&\/=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&\/=]*)?/g;
    const urls = str.match(reg) || [];
    const strs = str.split(reg).filter(n => n !== undefined);

    return (
      <React.Fragment>
        {strs.shift()}
        {strs.map((n, i) => (
          <React.Fragment>
            <a href={urls[i]}>{urls[i]}</a>
            {n}
          </React.Fragment>
        ))}
      </React.Fragment>
    );
  }

  render() {
    return (
      <div>
        <div>{this.replaceLinks()}</div>
        <div>{this.replaceLinks('Ссылка: https://google.com, ещё ссылка: https://qna.habr.com, и ещё: https://reactjs.org.')}</div>
        <div>{this.replaceLinks('ссылок нет')}</div>
      </div>
    );
  }
}

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