JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<button>Coucou</button>

<div class="foo">
	<div class="bar">
		<p>Coucou</p>
	</div>
</div>

SCSS

.foo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	transition: transform 0.3s ease-in;
}
.bar {
	background: beige;
	height: 150px;
}

/* Animate hidden element */
.foo {
	display: none;
	&.show {
		display: block;
		animation: slide 1s;
	}
}

@keyframes slide {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

JavaScript

$('button').on('click', function(){
	$('.foo').addClass('show');
});