JSFiddle - React, Tailwind, and code Playground

HTML

<head>

  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
  <meta name='apple-touch-fullscreen' content='yes'>
  <meta name='apple-mobile-web-app-capable' content='yes'>
  <meta name='apple-mobile-web-app-status-bar-style' content='rgba(228,228,228,1.0)'>

  <title>Home</title>

  <link rel='stylesheet' href='https://msp-greg.github.io/css/y_fonts.css' />
  <link rel='stylesheet' href='https://msp-greg.github.io/css/highlight.github.css' />
  <link rel='stylesheet' href='https://msp-greg.github.io/css/y_style.css' />
  <link rel='stylesheet' href='https://msp-greg.github.io/css/y_list.css' />
  <link rel='stylesheet' href='https://msp-greg.github.io/css/y_color.css' />
  <link rel='stylesheet' href='https://msp-greg.github.io/css/custom.css' />
  <link rel='stylesheet' href='https://msp-greg.github.io/css/common.css' />

  <script type='text/javascript'>
    var pathId = null,
      relpath = '';

    var t2Info = {
      CSEP: '.',
      ISEP: '#',
      NSEP: '::'
    };

  </script>

  <script src='https://msp-greg.github.io/js/highlight.pack.js'></script>
  <script src='https://msp-greg.github.io/js/y_app.js'></script>

</head>

<body>
  <svg id='y_wait' class viewBox='0 0 90 90'></svg>
  <div id='settings' class='hidden'></div>
  <div id='y_list' class='d h'>
    <header id='list_header'></header>
    <nav id='list_nav' class='y_nav l_nav'>
      <ul id='list_items'></ul>
    </nav>
  </div>
  <div id='y_toc' class='f h'>
    <header id='toc_header'></header>
    <nav id='toc_nav' class='y_nav t_nav'>
      <ol id='toc_items'></ol>
    </nav>
  </div>
  <div id='y_main' tabindex='-1'>
    <header id='y_header'>
      <div id='y_menu'>
        <a href='/'>Home</a> &raquo;
      </div>

      <a id='list_href' href="file_list.html"></a>
      <div id='y_measure_em' class='y_measure'></div>
      <div id='y_measure_vh' class='y_measure'></div>
      <span id='y_measure_50pre'...