CODEWITHSUNDEEP
cssflexboxtailwind-css
ussrback
ussrback

Reputation: 621

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: enter image description here

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. enter image description here
Kindly, advise how to organize DIVs as planned initially? Thanks in advance!

Upvotes: 0

Views: 573

Answers (1)

MrPatel2021
MrPatel2021

Reputation: 221

I try to resolve your problem, check here

Upvotes: 1

Related Questions