Currently, I am utilizing tailwind CSS to create a webpage with Next and Back buttons for navigation. However, an issue arises when there is minimal content on the page as the button adheres to the top. For visual reference, please view the image linked below.
Image link:- https://ibb.co/pw5QN2N
The code snippet used for these Buttons is as follows:
<div className="flex justify-between">
<NavLink to={"/course/" + courseName + "/" + (+moduleID - 1)}>
<button
className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
>
Back
</button>
</NavLink>
{courseContent[courseName][+moduleID - 1].quiz === true ? (
<NavLink to={"/course/" + courseName + "/" + +moduleID + "/quiz"}>
<button
className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
>
Next (Quiz)
</button>
</NavLink>
) : (
<NavLink to={"/course/" + courseName + "/" + (+moduleID + 1)}>
<button
className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
>
Next
</button>
</NavLink>
)}
</div>
I am seeking advice on how to rectify this issue so that the button remains fixed at the bottom of the page.