JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target1" class="old">
    FADING OUT LIKE A BOSS
</div>
<div id="target2" class="old">
    FADING OUT LIKE A BOSS
</div>
<div id="new1" class="new">
    FADING IN LIKE A BOSS
</div>
<div id="new2" class="new">
    FADING IN LIKE A BOSS
</div>

CSS

.old {
    height: 100px;
    background: red;
}

.new {
    display: none;
    opacity: 0;
    height: 100px;
    background: green;
}

JavaScript

function switchContent ($a, $b) {
    
    $a.animate ({opacity: 0}, 3000, function () {
       $a.replaceWith ($b);
       $b.css ('display', 'block').animate ({opacity: 1}, 3000); 
    });
    
    
}

switchContent ($('.old'), $('.new'));