3 Stunning React Tailwind CSS Footer Components
You rarely find a website without a footer, and for good reason—it’s a vital part of any website's design.
In this guide, I’ll walk you through implementing three sleek, fully responsive Tailwind CSS footer components, perfect for any project. With just a simple copy-paste, you can add these components to your site and customize them to match your brand's identity.
I have tried to cover all essential footer elements in this component. If something is left out, I will try to cover it in the next update with other variations (Just added V3).
Key Features of Our Tailwind Footer Components
Our carefully crafted Tailwind CSS footer components come with these 7 essential elements:
- Logo: Showcase your brand’s logo.
- Website Description: Briefly explain what your site is all about.
- Social Links: Direct users to your social media profiles.
- Contact Email: Provide a way for users to get in touch.
- Call to Action: Encourage users to take a specific action.
- Copyright Notice: Protect your content and display ownership.
- Scroll to Top Button: Allow users to easily navigate back to the top.
These Tailwind footer components can be used as a template too, and you can customize it however you like!
Note
The footer component's icons depend on the icon library luicide-react. You can download it using the command npm i lucide-react or use any icon library of your choice.
Simple Footer - Variant 1
Here's how the Simple Footer Component UI looks:
To make the code modular and scalable, I've created a variable for social links. In case of any changes, we only need to update the variable.
Additionally, I've separated the description to make it easier to modify.
Tailwind CSS Simple Footer Code
1import { 2 AtSignIcon, 3 EarthIcon, 4 FacebookIcon, 5 HeadsetIcon, 6 LinkedinIcon, 7 TwitterIcon, 8} from 'lucide-react' 9 10const socialLinks = [ 11 { 12 name: 'LinkedIn', 13 link: '/', 14 icon: <LinkedinIcon />, 15 }, 16 { 17 name: 'X', 18 link: '/', 19 icon: <TwitterIcon />, 20 }, 21 { 22 name: 'Facebook', 23 link: '/', 24 icon: <FacebookIcon />, 25 }, 26 { 27 name: 'Website', 28 link: '/', 29 icon: <EarthIcon />, 30 }, 31] 32 33const description = 34 'SkillSpot offers a range of free and paid online and offline courses in UAE, including topics like App Making, Data Skills, Photography, Money Management, and more. Improve your skills now!' 35 36const Footer = () => { 37 return ( 38 <footer className="relative z-50 bg-[#191F33]"> 39 <div className="flex flex-col items-center px-4 py-12"> 40 {/* app logo */} 41 <div> 42 <a 43 href="/" 44 className="mb-8 flex items-center justify-center gap-5 text-white" 45 > 46 <img 47 src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png" 48 className="h-8" 49 alt="Logo" 50 /> 51 <span className="text-3xl font-semibold tracking-wider"> 52 Flexy UI 53 </span> 54 </a> 55 <p className="max-w-xl text-center text-lg font-medium text-white"> 56 {description} 57 </p> 58 </div> 59 60 {/* social links */} 61 <div className="mt-8"> 62 <span className="mb-6 block text-center text-lg font-medium text-[#767E94]"> 63 Follow Us 64 </span> 65 <ul className="flex items-center gap-6"> 66 {socialLinks.map(({ name, icon, link }) => ( 67 <li key={name}> 68 <a 69 href={link} 70 title={name} 71 className="text-white hover:text-[#767e94]" 72 target="_blank" 73 > 74 {icon} 75 </a> 76 <span className="sr-only">{name} account</span> 77 </li> 78 ))} 79 </ul> 80 </div> 81 82 {/* email */} 83 <div className="mb-2 mt-6 flex items-center gap-2 text-white"> 84 <AtSignIcon size={16} /> 85 <span className="text-lg font-medium">info@email.com</span> 86 </div> 87 88 {/* call to action */} 89 <div className="mt-8"> 90 <button 91 type="button" 92 className="flex items-center gap-2 rounded-lg bg-gray-800 px-5 py-2.5 text-base font-semibold text-sky-100 transition duration-300 ease-in-out hover:bg-gray-100 hover:text-sky-600" 93 > 94 <HeadsetIcon size={20} /> 95 <span>Book A Demo</span> 96 </button> 97 </div> 98 </div> 99 100 {/* about author or app/copyrights */} 101 <div className="bg-[#2E3447]"> 102 <div className="px-3 py-3 text-center"> 103 <span className="text-[#767E94]"> 104 Coded with 💙 by{' '} 105 <a 106 href="https://www.linkedin.com/in/abdulbasitprofile/" 107 target="_blank" 108 className="text-white" 109 > 110 Abdul Basit{' '} 111 </a> 112 in Karachi 113 </span> 114 </div> 115 </div> 116 </footer> 117 ) 118} 119 120export default Footer
Multi Column Footer - Variant 2
The multi-column footer is a popular choice for eCommerce sites and blogs, cover all the essential footer elements.
Multi Column Footer Component UI:
Tailwind CSS Multi Column Footer Code
1import { 2 ArrowUp, 3 EarthIcon, 4 FacebookIcon, 5 LinkedinIcon, 6 TwitterIcon, 7} from 'lucide-react' 8 9const socialLinks = [ 10 { 11 name: 'LinkedIn', 12 link: '/', 13 icon: <LinkedinIcon className="size-6" />, 14 }, 15 { 16 name: 'X', 17 link: '/', 18 icon: <TwitterIcon className="size-6" />, 19 }, 20 { 21 name: 'Facebook', 22 link: '/', 23 icon: <FacebookIcon className="size-6" />, 24 }, 25 { 26 name: 'Website', 27 link: '/', 28 icon: <EarthIcon className="size-6" />, 29 }, 30] 31 32const support = { 33 title: 'Support', 34 items: [ 35 { label: 'Contact', href: '' }, 36 { label: 'FAQs', href: '' }, 37 { label: 'Pricing Plans', href: '' }, 38 { label: 'Sitemap', href: '' }, 39 ], 40} 41 42const quickLinks = { 43 title: 'Quick Links', 44 items: [ 45 { label: 'Jobs', href: '' }, 46 { label: 'Courses', href: '' }, 47 { label: 'Paid Training', href: '' }, 48 { label: 'Blog', href: '' }, 49 ], 50} 51 52const category = { 53 title: 'Category', 54 items: [ 55 { label: 'Graphics', href: '' }, 56 { label: 'Programming', href: '' }, 57 { label: 'eCommerce', href: '' }, 58 { label: 'Freelancing', href: '' }, 59 ], 60} 61 62const contact = { 63 address: '4517 Washington Ave. Manchester, Kentucky 39495', 64 phone: 'Phone: (405) 555-0128', 65 email: 'info@learningonline.com', 66} 67 68const Footer = () => { 69 const scrollToTop = () => { 70 window.scrollTo({ top: 0, behavior: 'smooth' }) 71 } 72 73 return ( 74 <footer className="bg-[#191F33]"> 75 <div className="mx-auto max-w-7xl px-4"> 76 <div className="grid gap-6 py-16 sm:grid-cols-[40fr_30fr_30fr] md:grid-cols-[40fr_30fr_30fr_30fr]"> 77 <div className=""> 78 <a href="/" className="mb-8 flex items-center gap-5 text-white"> 79 <img 80 src="https://res.cloudinary.com/dyvkdwzcj/image/upload/v1709055594/logo-1_vo1dni.png" 81 className="h-8" 82 alt="Logo" 83 /> 84 <h6 className="text-3xl font-semibold tracking-wider"> 85 Flexy UI 86 </h6> 87 </a> 88 <address className="mt-3 text-base font-normal text-[#767E94]"> 89 <p className="mt-3 max-w-64">{contact.address}</p> 90 <p className="mt-3">{contact.phone}</p> 91 <p className="mt-3">Mail: {contact.email}</p> 92 </address> 93 </div> 94 <div> 95 <h6 className="mb-7 text-xl text-white">{support.title}</h6> 96 <ul> 97 {support.items.map(({ label, href }) => ( 98 <li 99 key={label} 100 className="mt-3 text-base font-normal text-[#767E94] transition-all duration-150 ease-in hover:text-white hover:underline hover:decoration-[#00AAFF] hover:underline-offset-8" 101 > 102 <a href={href}>{label}</a> 103 </li> 104 ))} 105 </ul> 106 </div> 107 <div> 108 <h6 className="mb-7 text-xl text-white">{quickLinks.title}</h6> 109 <ul> 110 {quickLinks.items.map(({ label, href }) => ( 111 <li 112 key={label} 113 className="mt-3 text-base font-normal text-[#767E94] transition-all duration-150 ease-in hover:text-white hover:underline hover:decoration-[#00AAFF] hover:underline-offset-8" 114 > 115 <a href={href}>{label}</a> 116 </li> 117 ))} 118 </ul> 119 </div> 120 <div> 121 <h6 className="mb-7 text-xl text-white">{category.title}</h6> 122 <ul> 123 {category.items.map(({ label, href }) => ( 124 <li 125 key={label} 126 className="mt-3 text-base font-normal text-[#767E94] transition-all duration-150 ease-in hover:text-white hover:underline hover:decoration-[#00AAFF] hover:underline-offset-8" 127 > 128 <a href={href}>{label}</a> 129 </li> 130 ))} 131 </ul> 132 </div> 133 </div> 134 </div> 135 <div className="relative bg-[#2E3447]"> 136 <button 137 onClick={scrollToTop} 138 className="absolute -top-7 right-8 flex size-14 items-center justify-center rounded-full border-[6px] border-[#191F33] bg-[#00AAFF] md:right-16" 139 > 140 <ArrowUp color="#fff" size={22} /> 141 </button> 142 <div className="mx-auto flex max-w-7xl flex-col items-center gap-3 px-4 py-[26px] md:flex-row md:justify-between"> 143 <p className="text-center text-[#767E94]"> 144 Learning Online © 2024. Developed by{' '} 145 <span className="text-white">Abdul Basit</span> 146 </p> 147 <ul className="flex items-center gap-6"> 148 {socialLinks.map(({ name, icon, link }) => ( 149 <li key={name}> 150 <a 151 href={link} 152 title={name} 153 className="text-[#767E94] hover:text-white" 154 target="_blank" 155 rel="noopener noreferrer" 156 > 157 {icon} 158 </a> 159 <span className="sr-only">{name} account</span> 160 </li> 161 ))} 162 </ul> 163 </div> 164 </div> 165 </footer> 166 ) 167} 168 169export default Footer
Navigation Footer - Variant 3
The Navigation Footer serves as a secondary navigation system. It allows users to navigate between different sections or pages directly from the footer, making it highly useful for large websites with multiple sections.
It can be used with portfolio, agency or landing pages as well.
Navigation Footer UI:
Navigation Foote Footer Code
1import { Codepen, Facebook, Github, Instagram, Linkedin, X } from 'lucide-react' 2 3const socialIcons = [ 4 { href: '', icon: <Github /> }, 5 { href: '', icon: <Linkedin /> }, 6 { href: '', icon: <Codepen /> }, 7 { href: '', icon: <X /> }, 8 { href: '', icon: <Instagram /> }, 9 { href: '', icon: <Facebook /> }, 10] 11 12const footerSections = [ 13 { 14 title: 'John Doe', 15 href: '#home', 16 content: 'Crafting high-performance web applications.', 17 }, 18 { 19 title: 'About', 20 href: '#about', 21 content: 'Get to know my journey and expertise.', 22 }, 23 { 24 title: 'Projects', 25 href: '#projects', 26 content: 'Explore my most impactful work.', 27 }, 28 { 29 title: 'Skills', 30 href: '#skills', 31 content: 'Technologies and tools I excel at.', 32 }, 33 { 34 title: 'Services', 35 href: '#services', 36 content: 'What I can offer to bring value to your project.', 37 }, 38] 39 40const Footer = () => ( 41 <footer className="bg-[#172b4d] px-4 py-6 text-white"> 42 <div className="mx-auto max-w-6xl"> 43 <div className="mb-6 grid grid-cols-1 gap-6 md:grid-cols-5"> 44 {footerSections.map((section, index) => ( 45 <section 46 key={index} 47 className="rounded-lg p-4 transition-colors duration-300 hover:bg-gray-600" 48 > 49 <a href={section.href} className="block"> 50 <h2 className="text-lg font-semibold">{section.title}</h2> 51 <p className="mt-2 text-sm text-gray-300">{section.content}</p> 52 </a> 53 </section> 54 ))} 55 </div> 56 <div className="border-t border-gray-700 pt-4"> 57 <div className="flex flex-col items-center justify-between md:flex-row"> 58 <p className="mb-4 text-sm md:mb-0"> 59 © 2024 Abdul Basit | Coded with 💜 60 </p> 61 <ul className="flex space-x-4"> 62 {socialIcons.map((item, index) => ( 63 <li 64 key={index} 65 className="h-8 w-8 rounded-full border border-gray-600 p-2 text-white transition-colors duration-300 hover:bg-gray-700" 66 > 67 <a 68 href={item.href} 69 className="flex h-full w-full items-center justify-center" 70 > 71 {item.icon} 72 </a> 73 </li> 74 ))} 75 </ul> 76 </div> 77 </div> 78 </div> 79 </footer> 80) 81 82export default Footer
Feel free to adjust the style and use the code in your app.
If this code helps you in your project, or if you need more components, please let me know via LinkedIn.