We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out
Tailwind CSS Footer - React
Use our React and Tailwind CSS footer to present your website/web app as clearly and efficiently as possible.
See below our footer examples that you can use in your Tailwind CSS and React project. The examples comes in different styles, so you can adapt it easily to your needs.
Footer Demo
Here's how to implement a simple and responsive footer component. It can be used to display information about your website or web app, such as contact information, social media links, and more.
1import { Typography } from "@material-tailwind/react";
2
3const YEAR = new Date().getFullYear();
4
5const LINKS = [
6 {
7 title: "About Us",
8 href: "#",
9 },
10 {
11 title: "License",
12 href: "#",
13 },
14 {
15 title: "Contribute",
16 href: "#",
17 },
18 {
19 title: "Contact Us",
20 href: "#",
21 },
22];
23
24export default function FooterDemo() {
25 return (
26 <footer className="flex w-full flex-row flex-wrap items-center justify-center gap-x-12 gap-y-3 border-t border-surface py-4 text-center md:justify-between">
27 <Typography>© {YEAR} Material Tailwind</Typography>
28 <ul className="flex flex-wrap items-center gap-x-6 gap-y-2">
29 {LINKS.map(({ title, href }) => (
30 <li>
31 <Typography as="a" href={href} className="hover:text-primary">
32 {title}
33 </Typography>
34 </li>
35 ))}
36 </ul>
37 </footer>
38 );
39}
40Footer with Logo
Use this footer example to display your website or web app's logo along with links to different sections of your website.
1import { Typography } from "@material-tailwind/react";
2
3const YEAR = new Date().getFullYear();
4
5const LINKS = [
6 {
7 title: "About Us",
8 href: "#",
9 },
10 {
11 title: "License",
12 href: "#",
13 },
14 {
15 title: "Contribute",
16 href: "#",
17 },
18 {
19 title: "Contact Us",
20 href: "#",
21 },
22];
23
24export default function FooterWithLogo() {
25 return (
26 <footer className="w-full">
27 <div className="flex w-full flex-row flex-wrap items-center justify-center gap-x-12 gap-y-3 text-center md:justify-between">
28 <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/logo.png" alt="brand" className="w-8" />
29 <ul className="flex flex-wrap items-center gap-x-6 gap-y-2">
30 {LINKS.map(({ title, href }, key) => (
31 <li key={key}>
32 <Typography as="a" href={href} className="hover:text-primary">
33 {title}
34 </Typography>
35 </li>
36 ))}
37 </ul>
38 </div>
39 <hr className="my-4 border-surface" />
40 <Typography className="text-center">
41 © {YEAR} Material Tailwind
42 </Typography>
43 </footer>
44 );
45}
46Footer with Social Link
Use this footer example to display your website or web app's logo along with navigation links, contact information, social media links, and much more.
1import { Typography, IconButton } from "@material-tailwind/react";
2import { Facebook, Instagram, X, Github, Dribbble } from "iconoir-react";
3
4const LINKS = [
5 {
6 title: "Product",
7 items: [
8 {
9 title: "Overview",
10 href: "#",
11 },
12 {
13 title: "Features",
14 href: "#",
15 },
16 {
17 title: "Solutions",
18 href: "#",
19 },
20 {
21 title: "Tutorials",
22 href: "#",
23 },
24 ],
25 },
26 {
27 title: "Company",
28 items: [
29 {
30 title: "About us",
31 href: "#",
32 },
33 {
34 title: "Careers",
35 href: "#",
36 },
37 {
38 title: "Press",
39 href: "#",
40 },
41 {
42 title: "News",
43 href: "#",
44 },
45 ],
46 },
47 {
48 title: "Resource",
49 items: [
50 {
51 title: "Blog",
52 href: "#",
53 },
54 {
55 title: "Newsletter",
56 href: "#",
57 },
58 {
59 title: "Events",
60 href: "#",
61 },
62 {
63 title: "Help center",
64 href: "#",
65 },
66 ],
67 },
68];
69
70const YEAR = new Date().getFullYear();
71
72export default function FooterWithSocialLinks() {
73 return (
74 <footer className="relative w-full">
75 <div className="mx-auto w-full max-w-7xl px-8">
76 <div className="grid grid-cols-1 justify-between gap-4 md:grid-cols-2">
77 <Typography type="h6" className="mb-4">
78 Material Tailwind
79 </Typography>
80 <div className="grid grid-cols-3 justify-between gap-x-6 gap-y-4">
81 {LINKS.map(({ title, items }) => (
82 <ul key={title}>
83 <Typography className="mb-2 font-semibold opacity-50">
84 {title}
85 </Typography>
86 {items.map(({ title, href }) => (
87 <li key={title}>
88 <Typography
89 as="a"
90 href={href}
91 className="py-1 hover:text-primary"
92 >
93 {title}
94 </Typography>
95 </li>
96 ))}
97 </ul>
98 ))}
99 </div>
100 </div>
101 <div className="mt-10 flex w-full flex-col items-center justify-center gap-4 border-t border-surface py-4 md:flex-row md:justify-between">
102 <Typography type="small" className="text-center">
103 © {YEAR}{" "}
104 <a href="https://material-tailwind.com/">Material Tailwind</a>. All
105 Rights Reserved.
106 </Typography>
107 <div className="flex gap-1 sm:justify-center">
108 <IconButton
109 as="a"
110 href="#"
111 color="secondary"
112 variant="ghost"
113 size="sm"
114 >
115 <Facebook className="h-4 w-4" />
116 </IconButton>
117 <IconButton
118 as="a"
119 href="#"
120 color="secondary"
121 variant="ghost"
122 size="sm"
123 >
124 <Instagram className="h-4 w-4" />
125 </IconButton>
126 <IconButton
127 as="a"
128 href="#"
129 color="secondary"
130 variant="ghost"
131 size="sm"
132 >
133 <X className="h-4 w-4" />
134 </IconButton>
135 <IconButton
136 as="a"
137 href="#"
138 color="secondary"
139 variant="ghost"
140 size="sm"
141 >
142 <Github className="h-4 w-4" />
143 </IconButton>
144 <IconButton
145 as="a"
146 href="#"
147 color="secondary"
148 variant="ghost"
149 size="sm"
150 >
151 <Dribbble className="h-4 w-4" />
152 </IconButton>
153 </div>
154 </div>
155 </div>
156 </footer>
157 );
158}
159Footer with Sitemap
Use this footer example to display your website or web app's logo along with navigation links, contact information, social media links, links to all resources and pages and much more.
1import { Typography, IconButton } from "@material-tailwind/react";
2import { Facebook, Instagram, X, Github, Dribbble } from "iconoir-react";
3
4const LINKS = [
5 {
6 title: "Company",
7 items: [
8 {
9 title: "About us",
10 href: "#",
11 },
12 {
13 title: "Careers",
14 href: "#",
15 },
16 {
17 title: "Press",
18 href: "#",
19 },
20 {
21 title: "News",
22 href: "#",
23 },
24 ],
25 },
26 {
27 title: "Help Center",
28 items: [
29 {
30 title: "Discord",
31 href: "#",
32 },
33 {
34 title: "Twitter",
35 href: "#",
36 },
37 {
38 title: "GitHub",
39 href: "#",
40 },
41 {
42 title: "Contact Us",
43 href: "#",
44 },
45 ],
46 },
47 {
48 title: "Resources",
49 items: [
50 {
51 title: "Blog",
52 href: "#",
53 },
54 {
55 title: "Newsletter",
56 href: "#",
57 },
58 {
59 title: "Free Products",
60 href: "#",
61 },
62 {
63 title: "Affiliate Program",
64 href: "#",
65 },
66 ],
67 },
68 {
69 title: "Products",
70 items: [
71 {
72 title: "Templates",
73 href: "#",
74 },
75 {
76 title: "UI Kits",
77 href: "#",
78 },
79 {
80 title: "Icons",
81 href: "#",
82 },
83 {
84 title: "Mockups",
85 href: "#",
86 },
87 ],
88 },
89];
90
91const YEAR = new Date().getFullYear();
92
93export default function FooterWithSitemap() {
94 return (
95 <footer className="relative w-full">
96 <div className="mx-auto w-full max-w-7xl px-8">
97 <div className="mx-auto grid w-full grid-cols-1 gap-8 py-12 md:grid-cols-2 lg:grid-cols-4">
98 {LINKS.map(({ title, items }) => (
99 <ul key={title}>
100 <Typography className="mb-2 font-semibold opacity-50">
101 {title}
102 </Typography>
103 {items.map(({ title, href }) => (
104 <li key={title}>
105 <Typography
106 as="a"
107 href={href}
108 className="py-1 hover:text-primary"
109 >
110 {title}
111 </Typography>
112 </li>
113 ))}
114 </ul>
115 ))}
116 </div>
117 <div className="mt-10 flex w-full flex-col items-center justify-center gap-4 border-t border-surface py-4 md:flex-row md:justify-between">
118 <Typography type="small" className="text-center">
119 © {YEAR}{" "}
120 <a href="https://material-tailwind.com/">Material Tailwind</a>. All
121 Rights Reserved.
122 </Typography>
123 <div className="flex gap-1 sm:justify-center">
124 <IconButton
125 as="a"
126 href="#"
127 color="secondary"
128 variant="ghost"
129 size="sm"
130 >
131 <Facebook className="h-4 w-4" />
132 </IconButton>
133 <IconButton
134 as="a"
135 href="#"
136 color="secondary"
137 variant="ghost"
138 size="sm"
139 >
140 <Instagram className="h-4 w-4" />
141 </IconButton>
142 <IconButton
143 as="a"
144 href="#"
145 color="secondary"
146 variant="ghost"
147 size="sm"
148 >
149 <X className="h-4 w-4" />
150 </IconButton>
151 <IconButton
152 as="a"
153 href="#"
154 color="secondary"
155 variant="ghost"
156 size="sm"
157 >
158 <Github className="h-4 w-4" />
159 </IconButton>
160 <IconButton
161 as="a"
162 href="#"
163 color="secondary"
164 variant="ghost"
165 size="sm"
166 >
167 <Dribbble className="h-4 w-4" />
168 </IconButton>
169 </div>
170 </div>
171 </div>
172 </footer>
173 );
174}
175