JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div id="test">
    hello
  </div>

  <div id="test2">
    there
  </div>

  <button id="next">
    Next
  </button>

</body>

CSS

body {
  text-align: center;
}

#test2 {
  display: none;
}

JavaScript

$(document).ready(function() {

   $("#next").click(function() {

     $("#test").hide("slide", {
       direction: "right"
     }, 1000);

     $("#test2").show("slide", {
       direction: "left"
     }, 1000);

   });

 });