JSFiddle - React, Tailwind, and code Playground

by johnbk

HTML

<ul id="list_container">
    <li> test 1 </li>
</ul>

CSS

.list_item2 {
    background-color: red;
}
.list_item {
    transition: background-color 1s ease;
    background-color: green;
}

JavaScript

function addItem(item) {
    var listContainer = document.getElementById('list_container');
    listContainer.innerHTML += '<li class="list_item">' + item + '</li>';
    listContainer.lastChild.className = "list_item2"; 
}

addItem("test 2");