JSFiddle - React, Tailwind, and code Playground

by trixta

HTML

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>scroll here:</h1>
<hr class="scrollpos">
<br>
<button class="toggle" type="button">toggle</button>
<div class="box">
	<div class="box-inner">
		<input />
	</div>
</div>

<script>
	setTimeout(function(){
		(document.scrollingElement || document.documentElement).scrollTop += document.querySelector('.scrollpos').getBoundingClientRect().top;
	}, 9);

	document.querySelector('.toggle').addEventListener('click', function(){
		var box = document.querySelector('.box-inner');
		var isVisible = box.classList.contains('is-visible');

		box.classList.toggle('is-visible', !isVisible);

		if(!isVisible){
			box.querySelector('input').focus();
		}
	});
</script>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

CSS

.box {
		position: absolute;
		max-width: 200px;
		overflow: hidden;
	}

	.box-inner {

		padding: 20px;
		min-height: 300px;
		border: 3px solid #000;
		background: #000;
		visibility: hidden;
		transform: translateY(-100%);

		transition: 400ms transform, 400ms visibility;
	}

	.box-inner.is-visible {
		visibility: visible;
		transform: translateY(0);
	}