Tailwind text over image without using absolute position

Question

Is there any better way to put the text over the image without using absolute position? I'm having a hard time fixing it on medium/small screens. I tried to look for other similar questions on StackOverflow but they are not in Tailwind.

Here's the image I'm trying to create. Just the image with the text over it on the right side.

Here is what I tried, which kind of works. It's not bad on large screens and small screens. I'm just having issues with medium screens.

<div className="p-10">
    <div className="relative">
      <span className='flex justify-center md:block '>
        <img className='w-2/3 sm:w-2/4 ' src={p} alt=''/>
      </span>
      <h1 className="relative sm:text-5xl  text-2xl text-white md:bottom-[35rem] md:left-[40%]  left-24 overflow-hidden">
            Photography <br /> helps people <br /> to see.
      </h1>
    </div>
</div>

Please correct me if I'm doing it wrong, or if there is a better way! Thank You

Answer 1

What you probably want is to overlay content with grid instead.

This article covers it very nicely. But it has more symmetry than the design you showing there.

If you can put what you have achieved so far in a play.tailwind I can take a look and suggest something. but hopefully the article can give the idea. But here is an idea of how to something similar without absolute positioning.