JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>


<title>slide demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>


<body>

  <div id="toggle">
    <h1 class="hallo">Hallo, wie geht es?</h1>
  </div>

</body>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  box-sizing: border-box;
  font-family: Ubuntu;
}

h1 {
  color: pink;
  background: black;
  width: 100%;
  height: 100vh;
  margin-left: 10%;
  margin-top: 10%;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  $('div').click(function() {
    $('h1').effect('slideIN', 1000);
  });
});