JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
  <div id="outer">
    <div id="inner">Effects Div
    </div>
  </div>

CSS

#outer {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: #ddd;
      height: 300px;
      width: 300px;
    }

    #inner {
      position: absolute;
      left: 20px;
      top: 100px;
      background-color: rgb(200, 100, 100);
      height: 200px;
      width:250px;
      text-align: center;
    }

JavaScript

$('#inner').hide();
$('#inner').show('blind', {direction: 'down'}, 3000);