Utilizing React and Tailwind, I am working towards creating two overlapping rectangles with text. The top rectangle's text should be aligned to the left, while the bottom rectangle's text should be aligned to the right. Regardless of window size adjustments, the font size should dynamically change to maintain consistent proportions within each box. Referencing the provided screenshot, it is crucial that:
- The bottom text must always start at the same position as the 't' in 'first'
- The spacing between the first and second sentences must remain constant.
Currently, my code fails to maintain these desired positions and spacings.
const Hero = ({ ...props }: HeroProps): JSX.Element => {
const textStyle = {
fontSize: `8vw`
};
return (
<div className='h-2/5 w-full'>
<div className="w-5/6 h-1/2 bg-red-500 flex items-center">
<h1 className="font-impact whitespace-nowrap w-full h-full" style={textStyle}>The first sentence</h1>
</div>
<div className="w-5/6 h-1/2 bg-blue-500 ml-auto flex items-center">
<h1 className="font-impact text-right whitespace-nowrap w-full h-full" style={textStyle}>The second sentence</h1>
</div>
</div>
);
};
This implementation is set for the initial section of my webpage, as indicated by:
<div className='h-2/5 w-full'>
Here's a snapshot displaying the current layout, which does not adjust correctly: https://i.stack.imgur.com/43STe.png
I am grateful for any assistance with this matter.