Profile Card

cards

Developer biography card with status badge and social action buttons.

#card#profile#user#avatar

Live Interactive Preview

Alex Rivers

Senior Frontend Engineer

San Francisco, CA

Component Source Code

Select language in the dropdown

ProfileCard.tsx

1'use client';
2
3import React from 'react';
4import { Mail, MapPin, CheckCircle2 } from 'lucide-react';
5
6export default function ProfileCard() {
7  return (
8    <div className="w-full max-w-xs sm:max-w-sm rounded-2xl sm:rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-lg text-center transition-colors">
9      <div className="mx-auto relative h-16 w-16 mb-3">
10        <div className="h-full w-full rounded-2xl bg-gradient-to-tr from-blue-600 to-violet-600 flex items-center justify-center text-white font-black text-xl shadow-md">
11          AU
12        </div>
13        <span className="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500 ring-2 ring-white dark:ring-slate-900" />
14      </div>
15      <div className="flex items-center justify-center gap-1.5">
16        <h3 className="text-base font-bold text-slate-900 dark:text-slate-100">Alex Rivers</h3>
17        <CheckCircle2 className="h-4 w-4 text-blue-500" />
18      </div>
19      <p className="text-xs text-slate-500 dark:text-slate-400 font-medium">Senior Frontend Engineer</p>
20      <div className="flex items-center justify-center gap-1 text-[11px] text-slate-400 my-2">
21        <MapPin className="h-3 w-3" /> San Francisco, CA
22      </div>
23      <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800 flex gap-2">
24        <button className="flex-1 rounded-xl bg-slate-900 dark:bg-slate-100 hover:bg-slate-800 dark:hover:bg-slate-200 py-2 text-xs font-semibold text-white dark:text-slate-900 transition">
25          Follow
26        </button>
27        <button className="rounded-xl border border-slate-200 dark:border-slate-700 p-2 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition">
28          <Mail className="h-4 w-4" />
29        </button>
30      </div>
31    </div>
32  );
33}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/cards/ProfileCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import ProfileCard from '@/components/cards/ProfileCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <ProfileCard />
7    </main>
8  );
9}