JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="wrap">
    <ul>
        <li>Teste</li>
    </ul>
</div>
<button id="add">Add</button>

CSS

#wrap {
    max-height: 100px;
    overflow: auto;
    color: #983b3b;
    border: #d8bdbd 1px solid;
    font: 11px tahoma, verdana, arial, sans-serif;
}
#wrap ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#wrap li {
    background: #f4eded;
    padding: 7px;
    margin: 1px 0;
    text-align: center;
}
button {
    cursor: pointer;
    background: #f4eded;
    width: 100%;
    border: #d8bdbd 1px solid;
    padding: 3px;
    margin: 3px;
    text-align: center;
}
.new {
    display: none;
}

JavaScript

$(function () {
    $("#add").click(function () {
        var wrapUl = $("#wrap ul");
        wrapUl.append('<li class="new">Teste</li>');
        $("li.new:last").slideDown('slow', 'easeOutBounce');
        $('#wrap').animate({
            scrollTop: wrapUl.height()
        }, 500);
    });
});