JSFiddle - React, Tailwind, and code Playground

HTML

<li>
    <font color="#FFFFFF">Change Background</font> 
        <ul class="dropup">
            <li><a href="javascript:" id="bgimg01">Link 1</a></li>
            <li><a href="javascript:" id="bgimg02">Link 2</a></li>
            <li><a href="javascript:" id="bgimg03">Link 3</a></li>
        </ul>
</li>

CSS

body{background-image:url(http://placehold.it/200x200/bb2343)}

JavaScript

$('#bgimg01').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
$('#bgimg02').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/hh3476)');
})
$('#bgimg03').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/gg0000)');
})