JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<div data-role="page">
    <div data-role="content">
        <div data-role="controlgroup">
            <a data-role="button" href="#" id="a">A</a>
            <a data-role="button" href="#" id="b">B</a>
            <a data-role="button" href="#" id="c">C</a>
            <a data-role="button" href="#" id="d">D</a>
            <a data-role="button" href="#" id="e">E</a>
        </div>
    </div>
</div>

CSS

.ui-loader {
    position: absolute;
    opacity: .85;
    z-index: 100;
    left: 50%;
    width: 40px;
    margin-left: -45px;
    margin-top: -35px;
    padding: 10px 30px;
}

JavaScript

jQuery(function ($) {
    
    //cache the loader and show it
    var $loader = $('.ui-loader').css({
        display : 'block'
    });
    $('a').bind('click', function () {
        var theme = this.id;
        $loader.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-' + theme);
    });
});