Web Developer Profile Card with TailwindCSS & Responsive Design

Web Developer Profile Card with TailwindCSS & Responsive Design 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/4/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 - Web Developer card design</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10</head>
11
12<body class="bg-indigo-50 flex items-center justify-center h-screen">
13
14    <div
15        class="flex flex-col md:flex-row items-center p-12 mx-2 gap-8 bg-slate-800 text-gray-300 rounded-lg shadow-lg md:max-w-4xl">
16
17        <div class="flex-shrink-0">
18            <img class="h-40 w-40 md:h-56 md:w-56 rounded-full border-4 border-sky-400" src="https://res.cloudinary.com/dgbx8jsyy/image/upload/v1743789253/sudhucodesStars/ookkejrbqnvexff82lre.png"
19                alt="user image">
20        </div>
21
22        <div class="flex flex-col ml-6">
23            <div class="text-center md:text-left">
24                <h1 class="text-sky-400 text-3xl md:text-4xl font-semibold">
25                    Sudhanshu Kumar
26                </h1>
27                <p class="text-lg font-medium mt-2 md:text-xl">
28                    Full Stack Developer
29                </p>
30                <p class="text-slate-400 mt-1 md:text-lg">
31                    Specialized in building highly scalable and performant web applications.
32                </p>
33            </div>
34
35            <div class="text-center md:text-left mt-6 md:mt-3">
36                <h2 class="text-sky-400 text-xl font-semibold mb-1">Skills</h2>
37                <p class="text-lg">HTML, CSS, JavaScript, React, Next.js, Node.js</p>
38            </div>
39
40            <div class="text-center md:text-left mt-6 md:mt-3">
41                <p class="text-slate-400">Location: Madhubani, Bihar, India</p>
42                <p class="text-slate-400">Email: sudhuteam@gmail.com</p>
43                <p class="text-slate-400">Website:
44                    <a href="https://sudhucodes.com" target="_blank" class="text-sky-400 underline">
45                        sudhucodes.com
46                    </a>
47                </p>
48            </div>
49        </div>
50    </div>
51
52</body>
53
54</html>

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.