JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sContainer">
    <div class="message0">Initial Content 111</div>
    <div class="message1">Initial Content 222</div>
    <div class="message2">Initial Content 333</div>
    <div class="message3">Initial Content 444</div>
    <div class="message4">Initial Content 555</div>
    <div class="message5">Initial Content 666</div>
    <div class="message6">Initial Content 777</div>
</div>

CSS

.message0 {
    margin: 10px;
    height: 200px;
    border: 10px solid green;
}
.message1 {
    margin: 10px;
    height: 200px;
    border: 10px solid yellow;
}
.message2 {
    margin: 10px;
    height: 200px;
    border: 10px solid pink;
}
.message3 {
    margin: 10px;
    height: 200px;
    border: 10px solid blue;
}
.message4 {
    margin: 10px;
    height: 200px;
    border: 10px solid black;
}
.message5 {
    margin: 10px;
    height: 200px;
    border: 10px solid cyan;
}
.message6 {
    margin: 10px;
    height: 200px;
    border: 10px solid orange;
}
.message7 {
    margin: 10px;
    height: 200px;
    border: 10px solid red;
}

JavaScript

var dataAbc = '<div class="message7">Focus Shifted Here</div>';

setTimeout(function () {
    $(dataAbc).prependTo("#sContainer");
    $(dataAbc).prependTo("#sContainer");
    $(dataAbc).prependTo("#sContainer");
    
}, 3000);