JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first_sentence">Test Sentence.</div>
<button id="button_test">Click</button>

CSS

#first_sentence {
    display: none;
}

JavaScript

jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

$(document).ready(function () {
    $("#button_test").on("click", function () {
        $("#first_sentence").slideLeftShow();
    });
});