JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="line active"></div>

CSS

.line {
  width:20px;
  height:0px;
  background: red;
  animation: line2 2s forwards;
}
.line.active{
  animation: line 2s forwards;
}
@-webkit-keyframes line {
	0% {
		height: 0;
	}
	100% {
		height: 200px;
	}
}
@-webkit-keyframes line2 {
	0% {
		height: initial;
	}
	100% {
		height: 0;
	}
}

JavaScript

$('.line').on('click',function(){
$(this).toggleClass('active')
})