Interactive User List Component with Profiles Tailwind CSS

Interactive User List Component with Profiles Tailwind CSS 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/5/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 - Interactive User List Component with Profiles Tailwind CSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11</head>
12
13<body
14    class="bg-gradient-to-br from-[#2e026b] to-[#00b4d8] bg-cover bg-no-repeat h-screen w-full flex items-center justify-center">
15
16    <div
17        class="p-6 px-3 bg-[rgba(255,255,255,0.4)] border border-[rgba(255,255,255,0.2)] backdrop-blur-[4px] rounded-md w-[350px]">
18        <div class="flex items-center justify-between w-full px-4">
19            <p class="text-lg font-bold text-[#00ffea]  cursor-default drop-shadow-md">Meet Our Experts</p>
20            <i class="fa-solid fa-gear pt-1 text-[#cddff5] cursor-pointer"></i>
21        </div>
22
23        <!-- User 1 -->
24        <div
25            class="flex items-center justify-between py-3 rounded hover:bg-[#0022] transition duration-300 cursor-pointer px-3 mt-6">
26            <div class="flex items-center gap-3">
27                <i class="fa-solid fa-user p-3 px-[13px] bg-[#F8F9FA] text-[#9149f5] rounded-full"></i>
28                <p class="flex flex-col font-semibold text-[#FFFFFF]">
29                    Sudhanshu Kumar
30                    <span class="text-xs font-normal text-[#cddff5]">Web Developer</span>
31                </p>
32            </div>
33            <i class="fa-solid fa-ellipsis-vertical text-[#E0E0E0]"></i>
34        </div>
35
36        <!-- User 2 -->
37        <div
38            class="flex items-center justify-between py-3 rounded hover:bg-[#0022] transition duration-300 cursor-pointer px-3">
39            <div class="flex items-center gap-3">
40                <i class="fa-solid fa-user p-3 px-[13px] bg-[#F8F9FA] text-[#9149f5] rounded-full"></i>
41                <p class="flex flex-col font-semibold text-[#FFFFFF]">
42                    Anjali Sharma
43                    <span class="text-xs font-normal text-[#cddff5]">UI/UX Designer</span>
44                </p>
45            </div>
46            <i class="fa-solid fa-ellipsis-vertical text-[#E0E0E0]"></i>
47        </div>
48
49        <!-- User 3 -->
50        <div
51            class="flex items-center justify-between py-3 rounded hover:bg-[#0022] transition duration-300 cursor-pointer px-3">
52            <div class="flex items-center gap-3">
53                <i class="fa-solid fa-user p-3 px-[13px] bg-[#F8F9FA] text-[#9149f5] rounded-full"></i>
54                <p class="flex flex-col font-semibold text-[#FFFFFF]">
55                    Rahul Verma
56                    <span class="text-xs font-normal text-[#cddff5]">Backend Developer</span>
57                </p>
58            </div>
59            <i class="fa-solid fa-ellipsis-vertical text-[#E0E0E0]"></i>
60        </div>
61
62        <!-- User 4 -->
63        <div
64            class="flex items-center justify-between py-3 rounded hover:bg-[#0022] transition duration-300 cursor-pointer px-3">
65            <div class="flex items-center gap-3">
66                <i class="fa-solid fa-user p-3 px-[13px] bg-[#F8F9FA] text-[#9149f5] rounded-full"></i>
67                <p class="flex flex-col font-semibold text-[#FFFFFF]">
68                    Priya Singh
69                    <span class="text-xs font-normal text-[#cddff5]">Full Stack Developer</span>
70                </p>
71            </div>
72            <i class="fa-solid fa-ellipsis-vertical text-[#E0E0E0]"></i>
73        </div>
74
75        <!-- User 5 -->
76        <div
77            class="flex items-center justify-between py-3 rounded hover:bg-[#0022] transition duration-300 cursor-pointer px-3">
78            <div class="flex items-center gap-3">
79                <i class="fa-solid fa-user p-3 px-[13px] bg-[#F8F9FA] text-[#9149f5] rounded-full"></i>
80                <p class="flex flex-col font-semibold text-[#FFFFFF]">
81                    Aditi Mehta
82                    <span class="text-xs font-normal text-[#cddff5]">Frontend Developer</span>
83                </p>
84            </div>
85            <i class="fa-solid fa-ellipsis-vertical text-[#E0E0E0]"></i>
86        </div>
87
88    </div>
89
90</body>
91
92</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.