JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<div id="txteram">
        Some content
    </div>

<button>Toggle</button>

CSS

body{
    margin-top: 200px;
    height: 100%;
    width: 100%;
}

#txteram {
    position:relative;
    top:-120px; /*-100px*/
    left: 40px;/*50px*//*200px;*/
    opacity: 0;

    -webkit-transition: opacity 1s ease-in, -webkit-transform 1s ease-in 3s;
    -moz-transition: opacity 1s ease-in, -moz-transform 1s ease-in 3s;
    -ms-transition: opacity 1s ease-in, -ms-transform 1s ease-in 3s;
    transition: opacity 1s ease-in, transform 1s ease-in 3s;
}
#txteram.showtxteram{
    opacity: 1;
    transform: translate(150px,0);
    -webkit-transform: translate(150px,0);
    -o-transform: translate(150px,0); 
    -moz-transform: translate(150px,0);
}

JavaScript

document.querySelector('button').addEventListener('click', function(){
    document.getElementById('txteram').classList.toggle('showtxteram');
}, false);