JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td><textarea>Lastly, because the textarea is positioned directly over the pre, you can extend this to do funky stuff such as syntax highlighting as you type; if you parse the value and split it into different tags before adding it to the pre, you can apply different colors to different sections. You’ll need to remove the visibility: hidden declaration from the pre and instead add color: transparent to the textarea. We use this technique in My Opera Mail to make it easier to scan the names in the To/Cc/Bcc fields of the compose screen. The snag is that all browsers other than Opera make the cursor color the same as the text color, so the cursor disappears when you make the color transparent. I don’t believe any W3C standard covers this (please let me know if I’m wrong), but the platform standard (based on the text editors shipped with them) seems to be the inverse of the background color on Windows and always black on Mac, regardless of background or foreground color. But until the other browsers see the light and fix this behavior you can still apply the syntax highlighting on blur and turn it off while the user is actually editing, or change the background color instead.</textarea></td>
        <td><pre>Lastly, because the textarea is positioned directly over the pre, you can extend this to do funky stuff such as syntax highlighting as you type; if you parse the value and split it into different tags before adding it to the pre, you can apply different colors to different sections. You’ll need to remove the visibility: hidden declaration from the pre and instead add color: transparent to the textarea. We use this technique in My Opera Mail to make it easier to scan the names in the To/Cc/Bcc fields of the compose screen. The snag is that all browsers other than Opera make the cursor color the same as the text color, so the cursor disappears when you make the color transparent. I don’t believe any W3C standard covers this (please let me...

CSS

td {width:50%; vertical-align:top;}
textarea, 
pre, textarea {
  width:100%;
  height:600px;
  margin-bottom:10px
  background: transparent;
  font: 400 13px/16px helvetica, arial, sans-serif;
  /* Make the text soft-wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow:hidden;
}