Professional Contact Us Section with Social Links and Clean UI TailwindCSS

Professional Contact Us Section with Social Links and Clean UI TailwindCSS 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 - Professional Contact Us Section with Social Links and Clean UI TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11    <link
12        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"
13        rel="stylesheet">
14</head>
15
16<body class="min-h-screen flex flex-col items-center justify-center font-['IBM_Plex_Sans']">
17
18    <div class="flex-col flex md:flex-row bg-slate-100 rounded shadow-md border overflow-hidden">
19        <div class="md:pr-32 bg-indigo-200 md:py-20 px-4 py-10 md:pl-16">
20            <h1 class="text-2xl font-bold text-slate-800 pb-6">Get in Touch</h1>
21            <div class="flex flex-col items-start pb-5">
22                <div class="flex items-center gap-2 text-indigo-500">
23                    <i class="fa-solid fa-envelope"></i>
24                    <p class="font-medium">Email</p>
25                </div>
26                <p class="text-sm text-gray-700">sudhuteam@gmail.com</p>
27            </div>
28            <div class="flex flex-col items-start pb-5">
29                <div class="flex items-center gap-2 text-indigo-500">
30                    <i class="fa-brands fa-twitter"></i>
31                    <p class="font-medium">Twitter</p>
32                </div>
33                <a class="text-sm text-gray-700 underline" href="#">sudhucodes</a>
34            </div>
35            <div class="flex flex-col items-start pb-5">
36                <div class="flex items-center gap-2 text-indigo-500">
37                    <i class="fa-brands fa-github"></i>
38                    <p class="font-medium">Github</p>
39                </div>
40                <a class="text-sm text-gray-700 underline" href="#">sudhucodes</a>
41            </div>
42        </div>
43        <div class="py-14 md:px-16 px-3">
44            <h1 class="text-2xl font-bold text-slate-700 pb-6">Contact Us</h1>
45            <div class="flex items-center gap-5 w-[350px] md:w-[500px]">
46                <input class="h-10 p-2 w-full border border-gray-300 rounded outline-none focus:border-indigo-300"
47                    type="text" placeholder="Name">
48                <input class="h-10 p-2 w-full border border-gray-300 rounded outline-none focus:border-indigo-300"
49                    type="email" placeholder="Email">
50            </div>
51            <textarea class="w-full mt-5 p-2 h-40 border border-gray-300 rounded resize-none outline-none focus:border-indigo-300" placeholder="Message"></textarea>
52            <button class="mt-5 bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">Send Message 
53                <i class="fa-solid fa-paper-plane text-sm"></i>
54            </button>
55        </div>
56    </div>
57
58</body>
59
60</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.