Perhaps the technology stack is not relevant in this case, but I am currently working on a nextjs project with tailwind for styling. I am attempting to place an image next to an h2 tag, but encountering unexpected behavior from the image. It seems as though there is no vertical overlap; it's almost as if the image is occupying one row and the text another. Here is my current setup:
https://i.sstatic.net/GvwVR.png
Below is the code that produced the display above:
<div className="pb-3 justify-center align-center">
<Image
src={logoNextjs}
alt="logo nextjs"
width={100}
height={100}
/>
<div>
<h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center">
Sample
</h2>
</div>
<p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 ">
Demo
</p>
</div>
If I apply the float-left class from tailwind to the Image tag in nextjs, I can achieve some alignment between the image and the h2 tag, albeit with slight vertical overlap:
https://i.sstatic.net/CX6OL.png
However, the issue persists as the image appears too far to the left when I actually want it right beside the text.
My understanding is that the Image component is essentially an optimized version of the img tag, suggesting that plain CSS solutions should suffice.
How can I make sure the image aligns perfectly vertically with the text and sits right next to it?