JSFiddle - React, Tailwind, and code Playground

by Florian

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="window">
  <h4>Show Logs</h4>
  <div class="autoscroll">
    <div class="log-container">
      <pre class="log"></pre>
    </div>
  </div>
</div>

CSS

.window {
  height: 300px;
  background: #fff;
}

.log {
  background-color: #1c1c1c;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
  border-radius: 3px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: #DDD;
}

.log-container {
  flex-basis: 100%;
}

.autoscroll {
  flex-basis: auto;
  display: flex;
  flex-direction: column-reverse;
  height: calc(100% - 56px);
  overflow-y: auto;
}

JavaScript

jQuery(document).ready(function($) {
  window.setInterval(function() {
    $('.log').append('<div class="line">Lorem ipsum dolor sit amet</div>');
  }, 100);
});