My goal is to arrange the DIVs inside the container in a way that the top DIV (containing text) overlaps the DIV next to it. Below is a sketch of what I have in mind: https://i.sstatic.net/kUVGT.png
This is the HTML code I have written for this layout (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>
Unfortunately, the outcome is not as expected.
https://i.sstatic.net/rXaPt.png
Please advise on how to organize the DIVs according to the initial plan.
Thank you in advance!