title: Animate toggle menu dropdown
body: <p>I want to animate a menu when it's toggled. I don't know what I'm missing. I've tried setting an inline style but it didn't work.
  On this project, I'm using React with TailwindCSS. The Tailwind transition effects are not working too, so I suppose this has to be done with CSS and/or JavaScript.
  Here's my code:</p>
  <pre><code>import React, { useState } from 'react';
  import { NavLink } from 'react-router-dom';
  
  const NavBar = () =&gt; {
      const [open, setOpen] = useState(false);
  
      const toggleOpenHandler = () =&gt; setOpen(!open);
  
      return (
          &lt;div&gt;
              &lt;div className=&quot;relative px-4 pt-6 bg-red-100 sm:px-6 lg:px-8&quot;&gt;
                  &lt;nav className=&quot;relative flex items-center justify-between sm:h-10 lg:justify-start&quot;&gt;
                      &lt;div className=&quot;flex items-center flex-grow flex-shrink-0 lg:flex-grow-0&quot;&gt;
                          &lt;div className=&quot;flex items-center justify-between w-full md:w-auto&quot;&gt;
                              &lt;NavLink to=&quot;/&quot; aria-label=&quot;Home&quot;&gt;
                                  &lt;img className=&quot;w-auto h-8 sm:h-10&quot; src=&quot;https://tailwindui.com/img/logos/workflow-mark-on-white.svg&quot; alt=&quot;Logo&quot; /&gt;
                              &lt;/NavLink&gt;
                              &lt;div className=&quot;flex items-center -mr-2 md:hidden&quot;&gt;
                                  &lt;button onClick={toggleOpenHandler} type=&quot;button&quot; className=&quot;inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 focus:text-blue-500&quot; id=&quot;main-menu&quot; aria-label=&quot;Main menu&quot; aria-haspopup=&quot;true&quot;&gt;
                                      &lt;svg className=&quot;w-6 h-6&quot; stroke=&quot;currentColor&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot;&gt;
                                          &lt;path strokeLinecap=&quot;round&quot; strokeLinejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M4 6h16M4 12h16M4 18h16&quot; /&gt;
                                      &lt;/svg&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;hidden md:block md:ml-10 md:pr-4&quot;&gt;
                          &lt;NavLink to=&quot;/services&quot; className=&quot;font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900&quot;&gt;Serviços&lt;/NavLink&gt;
                          &lt;NavLink to=&quot;/about&quot; className=&quot;ml-8 font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900&quot;&gt;Sobre&lt;/NavLink&gt;
                          &lt;NavLink to=&quot;/releases&quot; className=&quot;ml-8 font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900&quot;&gt;Lançamentos&lt;/NavLink&gt;
                          &lt;NavLink to=&quot;/contact&quot; className=&quot;ml-8 font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-900&quot;&gt;Contato&lt;/NavLink&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
              {/* 
                Mobile menu, show/hide based on menu open state.
  
                Entering: &quot;duration-150 ease-out&quot;
                From: &quot;opacity-0 scale-95&quot;
                To: &quot;opacity-100 scale-100&quot;
                Leaving: &quot;duration-100 ease-in&quot;
                From: &quot;opacity-100 scale-100&quot;
                To: &quot;opacity-0 scale-95&quot;
              */}
              {open &amp;&amp;
                  &lt;div style={{ transition: 'all 3s ease-in-out' }} className=&quot;absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden&quot;&gt;
                      &lt;div className=&quot;rounded-lg shadow-md&quot;&gt;
                          &lt;div className=&quot;overflow-hidden bg-red-100 rounded-lg shadow-xs&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;main-menu&quot;&gt;
                              &lt;div className=&quot;flex items-center justify-between px-5 pt-4&quot;&gt;
                                  &lt;div&gt;
                                      &lt;img className=&quot;w-auto h-8&quot; src=&quot;https://tailwindui.com/img/logos/workflow-mark-on-white.svg&quot; alt=&quot;&quot; /&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;-mr-2&quot;&gt;
                                      &lt;button onClick={toggleOpenHandler} type=&quot;button&quot; className=&quot;inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 focus:text-blue-500&quot; aria-label=&quot;Close menu&quot;&gt;
                                          &lt;svg className=&quot;w-6 h-6&quot; stroke=&quot;currentColor&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot;&gt;
                                              &lt;path strokeLinecap=&quot;round&quot; strokeLinejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M6 18L18 6M6 6l12 12&quot; /&gt;
                                          &lt;/svg&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className=&quot;px-2 pt-2 pb-3&quot;&gt;
                                  &lt;NavLink to=&quot;/services&quot; className=&quot;block px-3 py-2 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50&quot; role=&quot;menuitem&quot;&gt;Serviços&lt;/NavLink&gt;
                                  &lt;NavLink to=&quot;/about&quot; className=&quot;block px-3 py-2 mt-1 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50&quot; role=&quot;menuitem&quot;&gt;Sobre&lt;/NavLink&gt;
                                  &lt;NavLink to=&quot;/releases&quot; className=&quot;block px-3 py-2 mt-1 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50&quot; role=&quot;menuitem&quot;&gt;Lançamentos&lt;/NavLink&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;NavLink to=&quot;#&quot; className=&quot;block w-full px-5 py-3 font-medium text-center text-indigo-600 transition duration-150 ease-in-out bg-blue-50 hover:bg-blue-100 hover:text-indigo-700 focus:outline-none focus:bg-blue-100 focus:text-indigo-700&quot; role=&quot;menuitem&quot;&gt;
                                      Contato
                                  &lt;/NavLink&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
          &lt;/div&gt;
      );
  }
  
  export default NavBar;
  </code></pre>