Gradient-Themed Profile Card with Social Media Links - TailwindCSS

Gradient-Themed Profile Card with Social Media Links - 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/30/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<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>SudhuCodes - Gradient-Themed Profile Card with Social Media Links - TailwindCSS</title>
8    <script src="https://cdn.tailwindcss.com"></script>
9    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
10</head>
11<body class="min-h-screen flex items-center justify-center bg-[#1d1d1d] select-none">
12
13    <div class="relative flex items-center justify-center group">
14        <!-- Gradient Background with blur -->
15        <div class="absolute blur-xl h-[270px] w-[210px] bg-gradient-to-tr from-[#00bcd4] to-[#ff4081] -z-20 rounded-lg"></div>
16        <!-- Solid Gradient Box -->
17        <div class="absolute h-[270px] w-[210px] bg-gradient-to-tr from-[#00bcd4] to-[#ff4081] -z-10 rounded-[12px]"></div>
18        
19        <!-- Profile Card -->
20        <div class="bg-black/80 h-[260px] w-[200px] z-20 flex flex-col items-center justify-center p-4 rounded-lg shadow-lg">
21
22            <div class="flex flex-col items-center">
23                <!-- Image -->
24                <div class="flex items-center justify-center p-5 border-[2px] border-gray-400 rounded-full text-xl mb-5 text-gray-200">
25                    <i class="fa-solid fa-user px-[1px]"></i>
26                </div>
27                <p class="uppercase text-xl font-semibold text-gray-200">John Doe</p>
28                <p class="text-xs uppercase text-gray-400 mb-3">Software Developer</p>
29                
30                <!-- Social Media Icons -->
31                <div class="space-x-2">
32                    <a href="#">
33                        <i class="fa-brands fa-facebook p-2 bg-black/30 text-gray-300 rounded hover:translate-y-[-3px] hover:text-teal-300 transition-all duration-300"></i>
34                    </a>
35                    <a href="#">
36                        <i class="fa-brands fa-twitter p-2 bg-black/30 text-gray-300 rounded hover:translate-y-[-3px] hover:text-teal-300 transition-all duration-300"></i>
37                    </a>
38                    <a href="#">
39                        <i class="fa-brands fa-linkedin p-2 bg-black/30 text-gray-300 rounded hover:translate-y-[-3px] hover:text-teal-300 transition-all duration-300"></i>
40                    </a>
41                    <a href="#">
42                        <i class="fa-brands fa-instagram p-2 bg-black/30 text-gray-300 rounded hover:translate-y-[-3px] hover:text-teal-300 transition-all duration-300"></i>
43                    </a>
44                </div>
45            </div>
46        </div>
47    </div>   
48
49</body>
50</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.