title: Tailwind increase height upwards on hover
body: <p>I have built the following interface using only the utility classes available in Tailwind css. When a down icon is hovered, the following menu correctly expands downwards:</p>
  <p><a href="https://i.stack.imgur.com/aipuQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aipuQ.png" alt="enter image description here" /></a></p>
  <p>My problem is with the up icon. When it is hovered, it also expands downward - I would like for it to expand <em>upward</em> but am struggling to figure out how to do so. Here is my current implementation (syntax is React/JSX):</p>
  <pre><code>&lt;div className=&quot;flex flex-col w-auto h-6 text-xl transition duration-300 transform transition-height hover:h-40 overflow-hidden ease-out&quot;&gt;
    {colors.reverse().map((color) =&gt; (
      &lt;div
        className={`text-${color}-400 w-6 h-6 rounded-full transform hover:cursor-pointer hover:bg-${color}-200 text-center`}
      &gt;
        &lt;FontAwesomeIcon icon={icon} /&gt;
      &lt;/div&gt;
    ))}
  &lt;/div&gt;
  </code></pre>
  <p>In addition to expanding upwards, I would also like for it to <strong>not</strong> push the preceding div/content further up, but instead to &quot;overlay&quot; its contents.</p>