Estoy haciendo mi sitio web de cartera con Reactjs + tailwind y tengo un problema en los componentes de la página.

el pie de página siempre se muestra en los otros elementos en respuesta

por ejemplo :

Aquí está el componente de pie de página

 import React from "react"; import { FaLinkedin } from "react-icons/fa"; import { SiGmail } from "react-icons/si"; import { VscGithub } from "react-icons/vsc"; export default function Footer() { return ( <footer className="pt-9"> <div className="flex flex-col m-auto justify-between w-[192px] h-[102px]"> <div className="flex justify-between"> <a target="_blank" href="https://github.com/Ali-Eldeba"> <VscGithub className="cursor-pointer text-[2rem] text-[#333] transition ease-in-out hover:scale-125 hover:rotate-[10deg] dark:text-white" /> </a> <a target="_blank" href="https://www.linkedin.com/in/alieldeba/"> <FaLinkedin className="cursor-pointer text-[2rem] text-[#0077b5] transition ease-in-out hover:scale-125 hover:rotate-[5deg]" /> </a> <a target="_blank" href="mailto:alieldeba375@gmail.com"> <SiGmail className="cursor-pointer text-[2rem] text-red-500 transition ease-in-out hover:scale-125 hover:rotate-[5deg]" /> </a> </div> </div> <p className="text-center dark:text-white mt-[-3rem]"> Made with <span className="text-red-500">❤</span> by alieldeba &copy; {new Date().getFullYear()} </p> </footer> ); }