title: Positioning of HTML elements in Tailwind css
body: <p>I'm trying to learn <code>tailwind-css</code> or I would say learning <code>css</code> where I'm struggling with the position of elements. Working on <code>Vue js</code> components.</p>
  
  <p>I achieved the designing few of the elements so far:</p>
  
  <p><a href="https://i.stack.imgur.com/3dFsV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3dFsV.png" alt="Home screen"></a></p>
  
  <p><a href="https://i.stack.imgur.com/fXS9I.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fXS9I.png" alt="feature page"></a></p>
  
  <p><a href="https://i.stack.imgur.com/6NIVy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6NIVy.png" alt="banner page"></a></p>
  
  <p><a href="https://i.stack.imgur.com/TodoU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TodoU.png" alt="description"></a></p>
  
  <p>I want to add some shapes or designs inside the <code>banner/dark-blue</code> area and then would add some widget-box inside of it. My code look something like this:</p>
  
  <pre><code>&lt;div class="bg-white block"&gt;
      &lt;nav-bar&gt;&lt;/nav-bar&gt;
      &lt;div class="hidden md:block w-2/5 top-0 left-0"&gt;
          &lt;img src="/nits-assets/images/body_shape.png" alt="shape" align="left"&gt;
      &lt;/div&gt;
      &lt;div class="hidden md:block"&gt;
          &lt;img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right"&gt;
      &lt;/div&gt;
      &lt;div class="block"&gt;
          &lt;div class="absolute w-full top-0 pl-12 pr-12 pt-40"&gt;
              &lt;slider&gt;&lt;/slider&gt;
              &lt;div class="flex justify-around"&gt;
                  &lt;card&gt;&lt;/card&gt;
                  &lt;card&gt;&lt;/card&gt;
                  &lt;card&gt;&lt;/card&gt;
                  &lt;card&gt;&lt;/card&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="block"&gt;
          &lt;div class="bg-white overlflow-hidden"&gt;
              &lt;div class="relative"&gt;
                  &lt;img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center"&gt;
                  &lt;img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;feature&gt;&lt;/feature&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For reference to the components code: <a href="https://github.com/nitish1986/sample_website" rel="noreferrer">https://github.com/nitish1986/sample_website</a></p>
  
  <p>My approach was to fix position of the parent element or make it relative then position the shapes with absolute positioning respective to its parent element but whenever I try to put absolute position the shapes reaches to the top of the website. It is not taking respective positioning</p>
  
  <pre><code>&lt;div class="bg-white overlflow-hidden"&gt;
      &lt;div class="relative"&gt;
          &lt;img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center"&gt;
          &lt;img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can achieve this positioning? I want to achieve something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3DSnS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3DSnS.png" alt="enter image description here"></a></p>
  
  <p>Any better approach into it are most welcome. Thanks.</p>