JSFiddle - React, Tailwind, and code Playground

HTML

<style>
#animated {
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;

  padding: 1em;
  border: 1px solid black;
}
</style>

<script>
function fadeIn() {
  document.getElementById('animated').style.display = 'block';
setTimeout(function() {document.getElementById('animated').style.opacity='1'},50)};

function fadeOut() {
  document.getElementById('animated').style.display = 'none';
  document.getElementById('animated').style.opacity = '0';

};
</script>

<div>
        <button onclick="fadeIn()">Показать</button>
        <button onclick="fadeOut()">Спрятать</button>
</div>

<div id="animated">язь-два-три</div>