title: Using Tailwind flex items not able to center
body: <p>I've 3 flex items which I want to place similar to <strong>instagram login page</strong> ( 1st row - image, login form ) and ( 2nd row - footer )</p>
  <p>I've below code</p>
  <pre><code>&lt;div className='container mx-auto px-4 lg:px-0 flex flex-col max-w-screen-md justify-center items-center'&gt;
    &lt;div className='container mx-auto px-4 lg:px-0 flex flex-row justify-center'&gt;
      &lt;div className='lg:w-3/5 items-center'&gt;
        &lt;p&gt; first &lt;/p&gt;
      &lt;/div&gt;
      &lt;div className='lg:w-2/5 items-center'&gt;
        &lt;p&gt; second &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div className='flex'&gt;
      &lt;div className=''&gt;
        &lt;p&gt; third &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am not able to get 1st row items centered, they are aligning to the left.</p>
  <p>Please clarify what's going wrong with this logic</p>