JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://pastebin.com/raw/H9gfpD4U"></script>
<a class="demoAnchor" href="/echo/js/?js=%3Csection%20class%3D%22demoSelector1%22%3E%3Ch1%3EMy%20title%3C/h1%3E%3Cp%3EMy%20content%3C/p%3E%3C/section%3E%3Csection%20class%3D%22demoSelector2%22%3E%3Ch1%3EMy%20title%3C/h1%3E%3Cp%3EMy%20content%3C/p%3E%3C/section%3E">Click me</a>
<a class="resetAnchor" href="/echo/js/?js=%3Cdiv%20class%3D%22demoDiv%22%3E%3C/div%3E">Reload me</a>
<div class="demoDiv"></div>

CSS

div.demoDiv {
  background-color: #fff;
  min-height: 13em;
  position: fixed;
  width: 100%;
}

JavaScript

dispatcher.addEventListener('body > a', function() {
    function onClick(event) {
        fetcher(event.target)
    				.credentials()
    				.fetch(dispatcher.dispatch);
            
        event.preventDefault();
    };
    
    return function(element, next) {
        element.addEventListener('click', onClick);
        
        next();
    };
}());

dispatcher.addEventListener('section.demoSelector2', function(element, next) {
    element.style.color = 'green';
    document.querySelector('div.demoDiv').append(element);

    next();
});

dispatcher.addEventListener('section.demoSelector1', function(element, next) {
    element.style.color = 'red';
    document.querySelector('div.demoDiv').append(element);

    next();
});

dispatcher.addEventListener('div.demoDiv', function(element, next, loaded) {
    if (!loaded) {
        return next();
    }
    
    let currentDiv = document.querySelector('div.demoDiv');
    currentDiv.parentNode.replaceChild(element, currentDiv);

    next();
});

dispatcher.populate(document);