JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">01</button>
<button id="btn2">02</button>
<button id="btn3">03</button>
</body>

CSS

body {align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-image: url(https://1.bp.blogspot.com/-10uYQ232GmA/VB2cCRa0pDI/AAAAAAAAGgw/m9nRdE1d-Rg/s1600/checkerboard-tile-pattern.jpg);
background-repeat:repeat;     
    -webkit-transition: background-image 1000ms ease-in-out 200ms; 
    -moz-transition: background-image 1000ms ease-in-out 200ms;
    -o-transition: background-image 1000ms ease-in-out 200ms;
    transition: background-image 1000ms ease-in-out 200ms;
}
body.class2 {
background-image: url(http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/WebDev/WebPageTiles/tilesTiles/tile_pattern_marbleTiles_bright_green_256x256.jpg);
background-repeat:repeat;
     -webkit-transition: background-image 1000ms ease-in-out 200ms; 
    -moz-transition: background-image 1000ms ease-in-out 200ms;
    -o-transition: background-image 1000ms ease-in-out 200ms;
    transition: background-image 1000ms ease-in-out 200ms;
}

button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}

body.class3 {
  background-image: url(https://4.bp.blogspot.com/-mCCWT2Qsqe4/UhHnOaJW7KI/AAAAAAAAFRo/4FHJyJdAeko/s1600/glossy-blue-ceramic-tiles-pattern.jpg);
background-repeat:repeat;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

     -webkit-transition: background-image 1000ms ease-in-out 200ms; 
    -moz-transition: background-image 1000ms ease-in-out 200ms;
    -o-transition: background-image 1000ms ease-in-out 200ms;
    transition: background-image 1000ms ease-in-out 200ms;
}

JavaScript

$("#btn1").click(function() {
 $('body').removeClass().addClass('class1',1000, "easeOutBounce" );
});

$("#btn2").click(function() {
 $('body').removeClass().addClass('class2',1000, "easeOutBounce" );
});

$("#btn3").click(function() {
 $('body').removeClass().addClass('class3',1000, "easeOutBounce" );
});