JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<div id="contacts">Контакты</div>
<div id="block" class="animated">Текст</div>
<div id="BG"></div>

CSS

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

.displayed{
	display: block;
}

#contacts {
    cursor: pointer;
    z-index: 3; /* important property, must be as same as in #block */
    position: relative;
}

#BG {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* important property, must me lesser than in #block */
    background: rgba(0,0,0,0);
    display: none;
}

#block {
    z-index: 3; /* important property, must be as same as in #contacts */
    position: relative;
    display: none;
    background: #ccc;
    padding:15px;
}

JavaScript

$(document).ready(function(){
    $("#contacts").toggle(in_, out_);
    $("#BG").click(out_);
});

function out_(){
  $("#block").addClass("fadeOutDown").removeClass("fadeInDown");
  $("#BG").css('display', 'none');
}

function in_(){
  $("#block").addClass("fadeInDown").css('display','block').removeClass("fadeOutDown");
  $("#BG").css('display', 'block');      
}