JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script id="order-template" type="text/x-handlebars-template">
    <li class="{{status}}">test</li>
</script>

<ul id="orders"></ul>

CSS

li {
    width: 100px;
    height: 20px;
    transition: background-color 2s;
}

li.pending {
    background-color: #eee;
}

li.processing {
    background-color: #fd8;
}

li.delivered {
    background-color: #ddd;
}

JavaScript

var source   = $("#order-template").html();
var template = Handlebars.compile(source);

$("#orders").html(template({status: "pending"}));

setTimeout(function(){

    $("#orders").html(template({status: "processing"}));
    
}, 1000);