title: Tailwindcss Dropdown item flying off to edge of the screen instead of under the dropdown button
body: <p>So Im making an app with Rails, Vue and TailwindCss 1.0+</p>
  
  <p>At present I'm attempting to make a dropdown menu for my products, but when I click on the dropdown button my dropdown that contains my items flys off to the edge of the screen, when it should be under my button.. </p>
  
  <p>Im not too sure where I'm going wrong. </p>
  
  <p>Pic of the problem: </p>
  
  <p><a href="https://i.stack.imgur.com/MdROt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MdROt.png" alt="enter image description here"></a></p>
  
  <p>Here is how the dropdown menu looks:</p>
  
  <pre><code>&lt;!-- Start LG Products Dropdown --&gt;
    &lt;div class="hidden lg:inline-block"&gt;
      &lt;button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600"&gt;
        &lt;i class="fal fa-sitemap"&gt;&lt;/i&gt;&lt;span class="ml-1"&gt;Products&lt;/span&gt;
      &lt;/button&gt;
      &lt;button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal"&gt;
      &lt;slot name="dropdown-items"&gt;&lt;/slot&gt;
    &lt;/div&gt;
  &lt;!-- End LG Products Dropdown --&gt;
  </code></pre>
  
  <p>This is the code of the entire nav component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;nav class="flex items-center justify-between flex-wrap bg-white p-6 w-full fixed"&gt;
      &lt;a href="https://loadze.com"&gt;
        &lt;h1&gt;
          &lt;div class="flex items-center flex-shrink-0 text-blue-600 mr-6 logoFont"&gt;
            &lt;span class="font-bold text-3xl tracking-tight"&gt;&lt;i class="far fa-truck-loading text-2xl"&gt;&lt;/i&gt;LOADZE&lt;/span&gt;
          &lt;/div&gt;
        &lt;/h1&gt;
      &lt;/a&gt;
  
      &lt;div class="block lg:hidden"&gt;
        &lt;button @click="navOpen = !navOpen" class="flex items-center px-3 py-2 border rounded text-blue-600 border-blue-600 hover:text-green-600 hover:border-green-600 focus:outline-none"&gt;
          &lt;svg v-if="!navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"&gt;&lt;path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"&gt;&lt;/path&gt;&lt;/svg&gt;
          &lt;svg v-if="navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"&gt;&lt;path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"&gt;&lt;/path&gt;&lt;/svg&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div :class="navOpen ? 'block' : 'hidden'" class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"&gt;
        &lt;div class="text-sm lg:flex-grow"&gt;
          &lt;slot name="nav-left"&gt;&lt;/slot&gt;
  
          &lt;!-- Start LG Products Dropdown --&gt;
            &lt;div class="hidden lg:inline-block"&gt;
              &lt;button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600"&gt;
                &lt;i class="fal fa-sitemap"&gt;&lt;/i&gt;&lt;span class="ml-1"&gt;Products&lt;/span&gt;
              &lt;/button&gt;
              &lt;button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal"&gt;
              &lt;slot name="dropdown-items"&gt;&lt;/slot&gt;
            &lt;/div&gt;
          &lt;!-- End LG Products Dropdown --&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;slot name="nav-right"&gt;&lt;/slot&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        navOpen: false,
        prodOpen: false
      }
    }
  }
  &lt;/script&gt;
  </code></pre>