title: TailWind CSS Dropdown on hover
body: <p>I have the following component:</p>
  <pre><code>&lt;div class=&quot;p-5&quot;&gt;
      &lt;div class=&quot;flex h-64 justify-center&quot;&gt;
          &lt;div class=&quot;relative &quot;&gt;
              &lt;div class=&quot;flex flex-row cursor-pointer truncate p-2 px-4  rounded&quot;&gt;
                  &lt;div&gt;&lt;/div&gt;
                  &lt;div class=&quot;flex flex-row-reverse ml-2 w-full&quot;&gt;
                      &lt;div slot=&quot;icon&quot; class=&quot;relative&quot;&gt;
                          &lt;div class=&quot;absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white&quot;&gt;3&lt;/div&gt;
                          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-shopping-cart w-6 h-6 mt-2&quot;&gt;
                              &lt;circle cx=&quot;9&quot; cy=&quot;21&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;
                              &lt;circle cx=&quot;20&quot; cy=&quot;21&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;
                              &lt;path d=&quot;M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6&quot;&gt;&lt;/path&gt;
                          &lt;/svg&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;absolute w-full  rounded-b border-t-0 z-10&quot;&gt;
                  &lt;div class=&quot;shadow-xl w-64&quot;&gt;
                      &lt;div class=&quot;p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100&quot; style=&quot;&quot;&gt;
                          &lt;div class=&quot;p-2 w-12&quot;&gt;&lt;img src=&quot;https://dummyimage.com/50x50/bababa/0011ff&amp;amp;text=50x50&quot; alt=&quot;img product&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;flex-auto text-sm w-32&quot;&gt;
                              &lt;div class=&quot;font-bold&quot;&gt;Product 1&lt;/div&gt;
                              &lt;div class=&quot;truncate&quot;&gt;Product 1 description&lt;/div&gt;
                              &lt;div class=&quot;text-gray-400&quot;&gt;Qt: 2&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;flex flex-col w-18 font-medium items-end&quot;&gt;
                              &lt;div class=&quot;w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700&quot;&gt;
                                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-trash-2 &quot;&gt;
                                      &lt;polyline points=&quot;3 6 5 6 21 6&quot;&gt;&lt;/polyline&gt;
                                      &lt;path d=&quot;M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2&quot;&gt;&lt;/path&gt;
                                      &lt;line x1=&quot;10&quot; y1=&quot;11&quot; x2=&quot;10&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
                                      &lt;line x1=&quot;14&quot; y1=&quot;11&quot; x2=&quot;14&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                              $12.22&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100&quot; style=&quot;&quot;&gt;
                          &lt;div class=&quot;p-2 w-12&quot;&gt;&lt;img src=&quot;https://dummyimage.com/50x50/bababa/0011ff&amp;amp;text=50x50&quot; alt=&quot;img product&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;flex-auto text-sm w-32&quot;&gt;
                              &lt;div class=&quot;font-bold&quot;&gt;Product 2&lt;/div&gt;
                              &lt;div class=&quot;truncate&quot;&gt;Product 2 long description&lt;/div&gt;
                              &lt;div class=&quot;text-gray-400&quot;&gt;Qt: 2&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;flex flex-col w-18 font-medium items-end&quot;&gt;
                              &lt;div class=&quot;w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700&quot;&gt;
                                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-trash-2 &quot;&gt;
                                      &lt;polyline points=&quot;3 6 5 6 21 6&quot;&gt;&lt;/polyline&gt;
                                      &lt;path d=&quot;M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2&quot;&gt;&lt;/path&gt;
                                      &lt;line x1=&quot;10&quot; y1=&quot;11&quot; x2=&quot;10&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
                                      &lt;line x1=&quot;14&quot; y1=&quot;11&quot; x2=&quot;14&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                              $12.22&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100&quot; style=&quot;&quot;&gt;
                          &lt;div class=&quot;p-2 w-12&quot;&gt;&lt;img src=&quot;https://dummyimage.com/50x50/bababa/0011ff&amp;amp;text=50x50&quot; alt=&quot;img product&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;flex-auto text-sm w-32&quot;&gt;
                              &lt;div class=&quot;font-bold&quot;&gt;Product 3&lt;/div&gt;
                              &lt;div class=&quot;truncate&quot;&gt;Product 3 description&lt;/div&gt;
                              &lt;div class=&quot;text-gray-400&quot;&gt;Qt: 2&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;flex flex-col w-18 font-medium items-end&quot;&gt;
                              &lt;div class=&quot;w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700&quot;&gt;
                                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-trash-2 &quot;&gt;
                                      &lt;polyline points=&quot;3 6 5 6 21 6&quot;&gt;&lt;/polyline&gt;
                                      &lt;path d=&quot;M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2&quot;&gt;&lt;/path&gt;
                                      &lt;line x1=&quot;10&quot; y1=&quot;11&quot; x2=&quot;10&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
                                      &lt;line x1=&quot;14&quot; y1=&quot;11&quot; x2=&quot;14&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                              $12.22&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;p-4 justify-center flex&quot;&gt;
                          &lt;button class=&quot;text-base  undefined  hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer 
          hover:bg-teal-700 hover:text-teal-100 
          bg-teal-100 
          text-teal-700 
          border duration-200 ease-in-out 
          border-teal-600 transition&quot;&gt;Checkout $36.66&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;h-32&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Which looks like:
  <a href="https://i.stack.imgur.com/idkgA.png" rel="nofollow noreferrer">The Dropdown Component</a>
  The effect I am looking for is that the dropdown menu firstly is hidden, and each time I hover on the cart logo the dropdown menu will be visible for 2 seconds after leaving the mouse (after the hover finished) from the cart logo.</p>