Responsive Footer Component with TailwindCSS for Modern Websites Website

Responsive Footer Component with TailwindCSS for Modern Websites Website Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/14/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Responsive Footer Design with TailwindCSS for a Developer Website</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <link
11        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
12        rel="stylesheet">
13</head>
14
15<body class="flex font-['IBM_Plex_Sans'] h-screen items-end justify-center bg-[#0c0d2c] text-gray-200">
16
17    <footer class="w-full flex md:flex-row flex-col items-center pb-24 px-5 md:px-0">
18        <div class="flex flex-col items-center w-full gap-6">
19            <div class="flex md:flex-row flex-col gap-10 pb-10 md:pb-0 md:gap-0 justify-around w-full">
20                <div>
21                    <h2 class="text-xl pb-3 font-semibold text-gray-100">Connect with Us</h2>
22                    <ul class="flex flex-col gap-1">
23                        <li><a class="text-sm" href="#">Twitter</a></li>
24                        <li><a class="text-sm" href="#">Facebook</a></li>
25                        <li><a class="text-sm" href="#">LinkedIn</a></li>
26                    </ul>
27                </div>
28                <div>
29                    <h2 class="text-xl pb-3 font-semibold text-gray-100">Quick Links</h2>
30                    <ul class="flex flex-col gap-1">
31                        <li><a class="text-sm" href="#">Home</a></li>
32                        <li><a class="text-sm" href="#">Background</a></li>
33                        <li><a class="text-sm" href="#">Create Account</a></li>
34                        <li><a class="text-sm" href="#">Terms and Attribution Policy</a></li>
35                        <li><a class="text-sm" href="#">Privacy Policy</a></li>
36                    </ul>
37                </div>
38                <div>
39                    <h2 class="text-xl pb-3 font-semibold text-gray-100">Contact Us</h2>
40                    <ul class="flex flex-col gap-1">
41                        <li class="text-sm">Reach Support</li>
42                        <li class="flex gap-4">
43                            <p class="text-sm">Email:</p>
44                            <p class="text-sm text-gray-400">sudhuteam@gmail.com</p>
45                        </li>
46                    </ul>
47                </div>
48            </div>
49            <p class="text-sm absolute left-[15%] md:left-[40%] bottom-16">© SudhuCodes 2024 - All rights reserved.</p>
50        </div>
51        <img class="h-52 hidden md:inline-block -mb-2" src="https://creatica.app/site/footer-bg.svg" alt="">
52    </footer>
53
54</body>
55
56</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.