CODEWITHSUNDEEP
csstailwind-css
needtoask
needtoask

Reputation: 25

Tailwind: Centered div on top of image

I have the following HTML:

<div>
<img src="">
<div><!-- centered form on top of the image --></div>
</div>

Here is how the layout should be

How do I do it with Tailwind? The solution has to be responsive. I don't want to use a background-image CSS property. I would like to use an <img> tag instead

Upvotes: 1

Views: 5918

Answers (1)

Nathan Gross
Nathan Gross

Reputation: 118

Does the markup have to be that way? How about something like this:

<div class="container mx-auto bg-gray-500 w-1/2 p-4 relative">
  <img src="http://placehold.it/300" alt="" class="w-full h-auto">
  <div class="bg-red-300 w-1/2 h-1/2 absolute top-1/4 left-1/4 rounded-lg p-4">div</div>
</div>

See it live: https://play.tailwindcss.com/IxHzcdTq1a

Upvotes: 7

Related Questions