JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="modal fade" tabindex="-1" role="dialog">
  MODAL!
</div><!-- /.modal -->

CSS

.modal {
  height: 0;
  display: block;
}
.fade.in {
  height: auto;
  opacity: 1;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 1s linear !important;
  -o-transition: opacity 1s linear !important;
  transition: opacity 1s linear !important;
}

JavaScript

var $modal = $('.modal');
setTimeout(function() {
  $modal.addClass('in');
},2000);

setTimeout(function() {
  $modal.removeClass('in');
},4000);