Currently, I am working with Tailwind and reactJS. I have two separate jsx files - Navpanel.jsx & Home.jsx.
The issue I am facing is that when I use a fixed position for the Home Text, it ends up overlapping with the navpanel. I have tried using block instead of flex, but then the Navpanel covers the entire screen. Can anyone provide a solution for this?
function Navpanel() {
return (
<div className="fixed flex h-full w-1/5 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
)
}
function Home() {
return (
<div className='flex relative'>Home</div>
)
}