JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <p class="row">Command 1</p>
    <p class="row">Command 2</p>
    <p class="row">Command 3</p>
    <p class="row">Command 4</p>
    <p class="row">Command 5</p>
    <p class="row">Command 6</p>
    <p class="row">Command 7</p>
    <p class="row">Command 8</p>
    <p class="row">Command 9</p>
    <p class="row">Command 10</p>
    <p class="row">Command 11</p>
    <p class="row">Command 12</p>
    <p class="row">Command 13</p>
    <p class="row">Command 14</p>
    <p class="row">Command 15</p>
    <p class="row">Command 16</p>
    <p class="row">Command 17</p>
    <p class="row">Command 18</p>
    <p class="row">Command 19</p>
    <p class="row">Command 20</p>
    <p class="row">Command 21</p>
    <p class="row">Command 22</p>
    <p class="row">Command 23</p>
    <p class="row">Command 24</p>
    <p class="row">Command 25</p>
    <p class="row">Command 26</p>
    <p class="row">Command 27</p>
    <p class="row">Command 28</p>
    <p class="row">Command 29</p>
    <p class="row">Command 30</p>
    <p class="row">Command 31</p>
    <p class="row">Command 32</p>
    <p class="row">Command 33</p>
    <p class="row">Command 34</p>
    <p class="row">Command 35</p>
    <p class="row">Command 36</p>
    <p class="row">Command 37</p>
    <p class="row">Command 38</p>
    <p class="row">Command 39</p>
    <p class="row">Command 40</p>
    <p class="row">Command 41</p>
    <p class="row">Command 42</p>
    <p class="row">Command 43</p>
    <p class="row">Command 44</p>
    <p class="row">Command 45</p>
    <p class="row">Command 46</p>
    <p class="row">Command 47</p>
    <p class="row">Command 48</p>
    <p class="row">Command 49</p>
    <p class="row">Command 50</p>
</div>
<input type="text" class="input" value="enter command" />

CSS

.container {
    max-height: 300px;
    background: #333;
    overflow: hidden;
    color: #DDD;
}

JavaScript

$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $container = $('.container');
    $container.append('<p class="row">' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
});