title: Create top-down slide animation using `Transition` from `@headlessui/react` using Tailwind CSS
body: <p>I want to create the following effect:</p>
  <p><img src="https://user-images.githubusercontent.com/16436270/109378376-0a011e00-78f8-11eb-8e15-acd72106ba09.gif" alt="typefully-effect" /></p>
  <p>Currently, I have this weird effect:</p>
  <p><img src="https://user-images.githubusercontent.com/16436270/109378383-0d94a500-78f8-11eb-8ee3-e0f13af11e98.gif" alt="weird animation" /></p>
  <p>I am using <a href="https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react#transition" rel="noreferrer">Transition</a> from <code>@headlessui/react</code>.</p>
  <p>My code looks like:</p>
  <pre><code>&lt;Transition
      show={app.theme !== 'light'}
      enter=&quot;transition ease duration-700 transform&quot;
      enterFrom=&quot;opacity-0 -translate-y-full&quot;
      enterTo=&quot;opacity-100 translate-y-0&quot;
      leave=&quot;transition ease duration-1000 transform&quot;
      leaveFrom=&quot;opacity-100 translate-y-0&quot;
      leaveTo=&quot;opacity-0 -translate-y-full&quot;
  &gt;
  </code></pre>
  <p>How do I achieve it?</p>