Tailwind CSS DIV positioning

My objective is to align DIVs inside the container in such way that top DIV (with text) overlaps DIV sitting next to it.
Drafted drawing below:

HTML code that I wrote for this is below (TailwindPlay):

<div class="container relative w-screen h-screen flex-col bg-slate-100">

  <div class="first flex bg-slate-400 top-0 relative">
    <div class="">
      <div class="slogan bg-red-100 inset-x-0 top-0 h-20 w-70 z-10 absolute">SLOGAN</div>
      <div class="somebox h-60 w-60 bg-blue-300 absolute inset-y-0 left-0">LOGIN FORM</div>
    </div>
    <div class="image bg-green-100 h-96 w-96 inset-y-0 right-0 absolute">TRANSPARENT PNG IMAGE</div>
  </div>
  
  <div class="second h-16 bg-yellow-50 inset-x-0 bottom-0 absolute">BOTTOM SLIDER</div>

</div>

However, the result is not what it supposed to be.
Kindly, advise how to organize DIVs as planned initially? Thanks in advance!