JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <div id="background"></div>
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th class="docs">
                            <h1>
                                comments.js
                            </h1>
                        </th>
                        <th class="code"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="section-1">
                        <td class="docs">
                            <div class="pilwrap">
                                <a class="pilcrow" href="#section-1">¶</a>
                            </div>
                            <h2>
                                This Is A Header
                            </h2>
                        </td>
                        <td class="code">
                            <div class="highlight"></div>
                        </td>
                    </tr>
                    <tr id="section-2">
                        <td class="docs">
                            <div class="pilwrap">
                                <a class="pilcrow" href="#section-2">¶</a>
                            </div>
                            <p>
                                This is a normal comment, that will become part of the annotations after running through the Docco tool. Use this space to describe the function or other code just below this comment. For example:
                            </p>
                            <p>
                                The <code>DoSomething</code> method does something! It doesn't take any parameters... it just does something.
                            </p>
                        </td>
                        <td class="code">
                            <div class="highlight">
                                <pre>
<span class="kd">function</span> <span class="nx">DoSomething</span><span...

CSS

/*--------------------- Layout and Typography ----------------------------*/
body {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
  font-size: 15px;
  line-height: 22px;
  color: #252519;
  margin: 0; padding: 0;
}
a {
  color: #261a3b;
}
  a:visited {
    color: #261a3b;
  }
p {
  margin: 0 0 15px 0;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0px 0 15px 0;
}
  h1 {
    margin-top: 40px;
  }
#container {
  position: relative;
}
#background {
  position: fixed;
  top: 0; left: 525px; right: 0; bottom: 0;
  background: #f5f5ff;
  border-left: 1px solid #e5e5ee;
  z-index: -1;
}
#jump_to, #jump_page {
  background: white;
  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
  font: 10px Arial;
  text-transform: uppercase;
  cursor: pointer;
  text-align: right;
}
#jump_to, #jump_wrapper {
  position: fixed;
  right: 0; top: 0;
  padding: 5px 10px;
}
  #jump_wrapper {
    padding: 0;
    display: none;
  }
    #jump_to:hover #jump_wrapper {
      display: block;
    }
    #jump_page {
      padding: 5px 0 3px;
      margin: 0 0 25px 25px;
    }
      #jump_page .source {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        border-top: 1px solid #eee;
      }
        #jump_page .source:hover {
          background: #f5f5ff;
        }
        #jump_page .source:first-child {
        }
table td {
  border: 0;
  outline: 0;
}
  td.docs, th.docs {
    max-width: 450px;
    min-width: 450px;
    min-height: 5px;
    padding: 10px 25px 1px 50px;
    overflow-x: hidden;
    vertical-align: top;
    text-align: left;
  }
    .docs pre {
      margin: 15px 0 15px;
      padding-left: 15px;
    }
    .docs p tt, .docs p code {
      background: #f8f8ff;
      border: 1px solid #dedede;
      font-size: 12px;
      padding: 0 0.2em;
    }
    .pilwrap {
      position: relative;
    }
      .pilcrow {
        font: 12px...