Create top-down slide animation using Transition from @headlessui/react using Tailwind CSS

[deadcoder0904]

I want to create this effect:

Currently, I have this weird effect:

My code looks like:

<Transition
	show={app.theme !== 'light'}
	enter="transition ease duration-700 transform"
	enterFrom="opacity-0 -translate-y-full"
	enterTo="opacity-100 translate-y-0"
	leave="transition ease duration-1000 transform"
	leaveFrom="opacity-100 translate-y-0"
	leaveTo="opacity-0 -translate-y-full"
>

How do I achieve it?