JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    <li><a href="#tab4">Tab4</a></li>
    <li><a href="#tab5">Tab5</a></li>
  </ul>
  <div id="tab1">
    <div class="console" id="monitor1"></div>
  </div>
  <div id="tab2">
    <div class="console" id="monitor2"></div>
  </div>
  <div id="tab3">
    <div class="console" id="monitor3"></div>
  </div>
  <div id="tab4">
    <div class="console" id="monitor4"></div>
  </div>
  <div id="tab5">
    <div class="console" id="monitor5"></div>
  </div>
</div>

CSS

.console {
  overflow-y: auto;
  height: 500px;
}

#monitor1, #monitor2 {
  white-space: pre-wrap;
  word-break: break-all;
}

#monitor3 {
  white-space: pre;
}

#monitor4 {
  white-space: pre-wrap;
}

#monitor5 {
  white-space: pre-wrap;
  word-wrap: break-word;
}

JavaScript

$(function() {
  var tabs = $('#tabs').tabs();
});

function populate(id, count, text) {
  var c = $(id);
  for (i = 0; i < count; i++) {
    c.append(text);
  }
};

populate('#monitor1', 20000, 'Testing\n');
populate('#monitor2', 2000, 'TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting\n');
populate('#monitor3', 2000, 'TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting\n');
populate('#monitor4', 2000, 'TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting\n');
populate('#monitor5', 2000, 'TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting-TestingTestingTesting\n');