JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aliquam fugiat atque non tenetur ipsam dignissimos dolorum voluptatibus. Dolore amet corporis qui quo odit, quas sed molestias, dignissimos animi. Dolore.</span>
</div>
<button id="demo">click</button>

CSS

div {
    display: none;
}
div.active {
    display: block;
}
span{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: 1s;
}
div.active span {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

JavaScript

document.querySelector('#demo').addEventListener('click',function(){
	document.querySelector('div').classList.toggle('active');
})