JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript://" onclick="$('.example_block').removeClass('hide');">Показать элемент</a>
<br />
<a href="javascript://" onclick="$('.example_block').addClass('hide');">Скрыть элемент</a>

<div class="example_block"></div>

CSS

.example_block {
    display: block;
    width: 300px;
    height: 150px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: Red;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.example_block.hide {
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}