I'm struggling to position text over an image without using absolute positioning. It's working fine on large and small screens, but I'm having trouble with medium screens. I've searched for similar questions on Stack Overflow, but none were specific to Tailwind.
Here's the image I'm attempting to place text over, specifically on the right side of the image.
Below is what I have tried so far, which somewhat works. However, it needs improvement for medium-sized 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>
If there's a better way to achieve this or if you notice any mistakes in my approach, please let me know. Thank you!