1. Create a Footer.jsx inside the components folder.
2. Add Footer component in App.jsx
3. Go on Flowbite website in Footer components, choose footer design.
4. Copy Footer code and paste it in Footer.jsx.
5. Customize Logo image, URLs, Links, etc.
Footer.jsx:-
import { Footer } from ‘flowbite-react’;
import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from ‘react-icons/bs’;
const FooterCompo = () => {
return (
<Footer container>
<div className=“w-full”>
<div className=“grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1”>
<div>
<Footer.Brand
href=“#”
src=“https://flowbite.com/docs/images/logo.svg”
alt=“Flowbite Logo”
name=“Krishan’s Blog”
/>
</div>
<div className=“grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6”>
<div>
<Footer.Title title=“about” />
<Footer.LinkGroup col>
<Footer.Link href=“#”>Flowbite</Footer.Link>
<Footer.Link href=“#”>Tailwind CSS</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title=“Follow us” />
<Footer.LinkGroup col>
<Footer.Link href=“#”>Github</Footer.Link>
<Footer.Link href=“#”>Discord</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title=“Legal” />
<Footer.LinkGroup col>
<Footer.Link href=“#”>Privacy Policy</Footer.Link>
<Footer.Link href=“#”>Terms & Conditions</Footer.Link>
</Footer.LinkGroup>
</div>
</div>
</div>
<Footer.Divider />
<div className=“w-full sm:flex sm:items-center sm:justify-between”>
<Footer.Copyright href=“#” by=“Krishan™” year={2024} />
<div className=“mt-4 flex space-x-6 sm:mt-0 sm:justify-center”>
<Footer.Icon href=“#” icon={BsFacebook} />
<Footer.Icon href=“#” icon={BsInstagram} />
<Footer.Icon href=“#” icon={BsTwitter} />
<Footer.Icon href=“#” icon={BsGithub} />
<Footer.Icon href=“#” icon={BsDribbble} />
</div>
</div>
</div>
</Footer>
)
}
export default FooterCompo
Video Tutorial:
