JSFiddle - React, Tailwind, and code Playground

CSS

.container {
    width: 250px;
    height: 100px;
    background-color: red;
}
.header {
    background-color: grey;
    width: 100%;
    display: inline-block;
    text-align: center;
}
.added_content {
    background-color: white;
    width: 100%;
    display: inline-block;
    text-align: center;
}
.timed_added_content {
    background-color: blue;
    color: grey;
    width: 100%;
    display: inline-block;
    text-align: center;
}

JavaScript

function remove() {
    $(this).fadeOut('slow',function(){this.remove()});
}

function timed_append_new_element() {
    setTimeout(function () {
        var added_content = $("<span />", {
            class: "added_content",
            text: "Click to close",
            click: remove
        });
        container.append(added_content);
    }, 3000);
}

function append_new_element() {
    var added_content = $("<span />", {
        class: "timed_added_content",
        text: "Click to close",
        click: remove
    });
    container.append(added_content);
}


var container = $("<div />", {
    class: "container"
});
var header = $("<span />", {
    class: "header",
    text: "jQuery to React.js Header"
});
var add_button = $("<button />", {
    class: "add_button",
    text: "Add Element",
    click: append_new_element
});
var timed_add_button = $("<button />", {
    class: "add_button",
    text: "Add Element in 3 seconds",
    click: timed_append_new_element
});
container.append(header);
container.append(add_button);
container.append(timed_add_button);
$("body").append(container);