How can I achieve 3 boxes on top of each other using Nextjs Tailwind?-CodePudding

I'm trying to add / style 3 boxes stacked on top of each other and then attach an image to it as such

https://i.stack.imgur.com/jVdIo.png

I was able to achieve this but it's leaning side ways

https://i.stack.imgur.com/fl0Zz.png

   <div className='flex flex-col box-border rounded strok h-60 w-48 p-4  border-2 ...'>
          <div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
            <div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
              <div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'></div>
            </div>
          </div>
        </div>

CodePudding user response：

You have all the boxes nested with padding. Since they're nested, they're considered children. The parents have padding. Consider having a parent with a position of relative and the 3 boxes having a position of absolute.

<div >
 <div >
 <div > 
 </div>
  <div ></div>
 <div ></div>

I made an example for you on tailwind playground https://play.tailwindcss.com/MJnaFMVio6

CodePudding user response：

This is how to implement that:

<!-- Background -->
<div >
  <!-- Boxes container -->
  <div >
    <div >
      <!-- Boxes stacked behind -->
      <div ></div>
      <div ></div>
      <!-- Box on top -->
      <div >
        <img  src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png">
      </div>
    </div>
  </div>
</div>

On Tailwind play: https://play.tailwindcss.com/dmU2c4ai36