JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<button data-bind="click: removeFirst">Remove first</button>
<ul data-bind='foreach: {data: items, beforeRemove: onRemove}'>
    <li data-bind="text: $data.name, click: $parent.removeItem"></li>
</ul>

CSS

body {
    font-family: sans-serif;
}

.transition-out {
    background-color: pink;
}

h1 {
    font-size: 14pt;
    margin-top: 10px;
}

JavaScript

function Item(i) {
    var self = this;
    this.name = ko.observable("Item " + i);
    
    this.toString = function() { return self.name(); }
}

var items = [];
for(var i=1; i<=15; i++)
    items.push(new Item(i));


function viewModel(list) {
    var self = this;
    
    this.items = ko.observableArray(list);
    
    this.removeItem = function(item) {
        self.items.remove(item);
    }
        
    this.removeFirst = function() {
        self.removeItem(self.items()[0]);
    };
    
    this.onRemove = function(elements) {
        console.log("Updating");
        $(elements).addClass('transition-out');
    };
}

ko.applyBindings(new viewModel(items));