Profile Components
Beautiful profile components built with TailwindCSS. Perfect for user profiles, account settings, and personal information displays.
1. User Profile Card
A clean and modern user profile card with avatar, bio, and social links.
<!-- User Profile Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="text-center">
<!-- Avatar with Initials -->
<div class="w-24 h-24 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-white shadow-lg">
<span class="text-white text-2xl font-bold">JD</span>
</div>
<h3 class="text-xl font-bold text-gray-900">John Doe</h3>
<p class="text-gray-600 mb-4">Software Developer</p>
<p class="text-sm text-gray-500 mb-4">Passionate about creating amazing user experiences and building scalable web applications.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-700">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-900">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
</div>
</div>
</div><template>
<!-- User Profile Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="text-center">
<!-- Avatar with Initials -->
<div class="w-24 h-24 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-white shadow-lg">
<span class="text-white text-2xl font-bold">JD</span>
</div>
<h3 class="text-xl font-bold text-gray-900">John Doe</h3>
<p class="text-gray-600 mb-4">Software Developer</p>
<p class="text-sm text-gray-500 mb-4">Passionate about creating amazing user experiences and building scalable web applications.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-700">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-900">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
</div>
</div>
</div>
</template>export default function UserProfileCard() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div className="text-center">
<!-- Avatar with Initials -->
<div className="w-24 h-24 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-white shadow-lg">
<span className="text-white text-2xl font-bold">JD</span>
</div>
<h3 className="text-xl font-bold text-gray-900">John Doe</h3>
<p className="text-gray-600 mb-4">Software Developer</p>
<p className="text-sm text-gray-500 mb-4">Passionate about creating amazing user experiences and building scalable web applications.</p>
<div className="flex justify-center space-x-4">
<a href="#" className="text-gray-400 hover:text-blue-500">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" className="text-gray-400 hover:text-blue-700">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" className="text-gray-400 hover:text-gray-900">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
</div>
</div>
</div>
);
}2. Profile Settings Form
A comprehensive profile settings form with input fields for updating user information.
Profile Settings
<!-- Profile Settings Form -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<h3 class="text-lg font-semibold mb-4">Profile Settings</h3>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="John Doe">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="john@example.com">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
<textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="Tell us about yourself..."></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Profile Picture</label>
<input type="file" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500">
</div>
<button type="submit" class="w-full bg-violet-600 text-white py-2 px-4 rounded-md hover:bg-violet-700 transition-colors">Save Changes</button>
</form>
</div><template>
<!-- Profile Settings Form -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<h3 class="text-lg font-semibold mb-4">Profile Settings</h3>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="John Doe">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="john@example.com">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
<textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="Tell us about yourself..."></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Profile Picture</label>
<input type="file" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500">
</div>
<button type="submit" class="w-full bg-violet-600 text-white py-2 px-4 rounded-md hover:bg-violet-700 transition-colors">Save Changes</button>
</form>
</div>
</template>export default function ProfileSettingsForm() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
<h3 className="text-lg font-semibold mb-4">Profile Settings</h3>
<form className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="John Doe" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="john@example.com" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Bio</label>
<textarea rows="3" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" placeholder="Tell us about yourself..." />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Profile Picture</label>
<input type="file" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-violet-500" />
</div>
<button type="submit" className="w-full bg-violet-600 text-white py-2 px-4 rounded-md hover:bg-violet-700 transition-colors">Save Changes</button>
</form>
</div>
);
}3. Profile Avatar with Status
A profile avatar component with online status indicator and customizable initials.
JD
John Doe
Online
<!-- Profile Avatar with Status -->
<div class="text-center">
<!-- Avatar with Status -->
<div class="relative inline-block">
<div class="w-24 h-24 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center border-4 border-white shadow-lg">
<span class="text-white text-2xl font-bold">JD</span>
</div>
<span class="absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full"></span>
</div>
<h3 class="text-xl font-bold text-gray-900 mt-4">John Doe</h3>
<p class="text-gray-600">Online</p>
</div><template>
<!-- Profile Avatar with Status -->
<div class="text-center">
<!-- Avatar with Status -->
<div class="relative inline-block">
<div class="w-24 h-24 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center border-4 border-white shadow-lg">
<span class="text-white text-2xl font-bold">JD</span>
</div>
<span class="absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full"></span>
</div>
<h3 class="text-xl font-bold text-gray-900 mt-4">John Doe</h3>
<p class="text-gray-600">Online</p>
</div>
</template>export default function ProfileAvatarWithStatus() {
return (
<div className="text-center">
<!-- Avatar with Status -->
<div className="relative inline-block">
<div className="w-24 h-24 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center border-4 border-white shadow-lg">
<span className="text-white text-2xl font-bold">JD</span>
</div>
<span className="absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full"></span>
</div>
<h3 className="text-xl font-bold text-gray-900 mt-4">John Doe</h3>
<p className="text-gray-600">Online</p>
</div>
);
}4. Profile Statistics Card
A profile card displaying user statistics with icons and counters.
JD
John Doe
Software Developer
42
Projects
1.2K
Followers
89
Reviews
<!-- Profile Statistics Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="text-center">
<!-- Avatar -->
<div class="w-16 h-16 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white shadow-lg">
<span class="text-white text-lg font-bold">JD</span>
</div>
<h3 class="text-xl font-bold text-gray-900">John Doe</h3>
<p class="text-gray-600 mb-4">Software Developer</p>
<!-- Stats -->
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-2xl font-bold text-violet">42</div>
<div class="text-sm text-gray-500">Projects</div>
</div>
<div>
<div class="text-2xl font-bold text-violet">1.2K</div>
<div class="text-sm text-gray-500">Followers</div>
</div>
<div>
<div class="text-2xl font-bold text-violet">89</div>
<div class="text-sm text-gray-500">Reviews</div>
</div>
</div>
</div>
</div><template>
<!-- Profile Statistics Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="text-center">
<!-- Avatar -->
<div class="w-16 h-16 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white shadow-lg">
<span class="text-white text-lg font-bold">JD</span>
</div>
<h3 class="text-xl font-bold text-gray-900">John Doe</h3>
<p class="text-gray-600 mb-4">Software Developer</p>
<!-- Stats -->
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-2xl font-bold text-violet">42</div>
<div class="text-sm text-gray-500">Projects</div>
</div>
<div>
<div class="text-2xl font-bold text-violet">1.2K</div>
<div class="text-sm text-gray-500">Followers</div>
</div>
<div>
<div class="text-2xl font-bold text-violet">89</div>
<div class="text-sm text-gray-500">Reviews</div>
</div>
</div>
</div>
</div>
</template>export default function ProfileStatisticsCard() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div className="text-center">
<!-- Avatar -->
<div className="w-16 h-16 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white shadow-lg">
<span className="text-white text-lg font-bold">JD</span>
</div>
<h3 className="text-xl font-bold text-gray-900">John Doe</h3>
<p className="text-gray-600 mb-4">Software Developer</p>
<!-- Stats -->
<div className="grid grid-cols-3 gap-4 text-center">
<div>
<div className="text-2xl font-bold text-violet">42</div>
<div className="text-sm text-gray-500">Projects</div>
</div>
<div>
<div className="text-2xl font-bold text-violet">1.2K</div>
<div className="text-sm text-gray-500">Followers</div>
</div>
<div>
<div className="text-2xl font-bold text-violet">89</div>
<div className="text-sm text-gray-500">Reviews</div>
</div>
</div>
</div>
</div>
);
}5. Social Media Profile Card
A social media-style profile card with follower stats, bio, and action buttons.
JD
@johndoe
John Doe
Passionate developer sharing code and creativity. Building the future one line at a time.
1.2K
Followers
345
Following
89
Posts
<!-- Social Media Profile Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="text-center">
<!-- Avatar -->
<div class="w-20 h-20 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-white shadow-lg">
<span class="text-white text-xl font-bold">JD</span>
</div>
<h3 class="text-xl font-bold text-gray-900">@johndoe</h3>
<p class="text-gray-600 mb-2">John Doe</p>
<p class="text-sm text-gray-500 mb-4">Passionate developer sharing code and creativity. Building the future one line at a time.</p>
<!-- Stats -->
<div class="flex justify-center space-x-6 mb-4">
<div class="text-center">
<div class="text-lg font-bold text-violet">1.2K</div>
<div class="text-xs text-gray-500">Followers</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-violet">345</div>
<div class="text-xs text-gray-500">Following</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-violet">89</div>
<div class="text-xs text-gray-500">Posts</div>
</div>
</div>
<!-- Actions -->
<div class="flex space-x-2">
<button class="flex-1 bg-violet-600 text-white py-2 px-4 rounded-md hover:bg-violet-700 transition-colors text-sm font-medium">Follow</button>
<button class="flex-1 border border-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium">Message</button>
</div>
</div>
</div><template>
<!-- Social Media Profile Card -->
<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div class="text-center">
<!-- Avatar -->
<div class="w-20 h-20 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-white shadow-lg">
<span class="text-white text-xl font-bold">JD</span>
</div>
<h3 class="text-xl font-bold text-gray-900">@johndoe</h3>
<p class="text-gray-600 mb-2">John Doe</p>
<p class="text-sm text-gray-500 mb-4">Passionate developer sharing code and creativity. Building the future one line at a time.</p>
<!-- Stats -->
<div class="flex justify-center space-x-6 mb-4">
<div class="text-center">
<div class="text-lg font-bold text-violet">1.2K</div>
<div class="text-xs text-gray-500">Followers</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-violet">345</div>
<div class="text-xs text-gray-500">Following</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-violet">89</div>
<div class="text-xs text-gray-500">Posts</div>
</div>
</div>
<!-- Actions -->
<div class="flex space-x-2">
<button class="flex-1 bg-violet-600 text-white py-2 px-4 rounded-md hover:bg-violet-700 transition-colors text-sm font-medium">Follow</button>
<button class="flex-1 border border-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium">Message</button>
</div>
</div>
</div>
</template>export default function SocialMediaProfileCard() {
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
<div className="text-center">
<!-- Avatar -->
<div className="w-20 h-20 bg-gradient-to-br from-violet to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-white shadow-lg">
<span className="text-white text-xl font-bold">JD</span>
</div>
<h3 className="text-xl font-bold text-gray-900">@johndoe</h3>
<p className="text-gray-600 mb-2">John Doe</p>
<p className="text-sm text-gray-500 mb-4">Passionate developer sharing code and creativity. Building the future one line at a time.</p>
<!-- Stats -->
<div className="flex justify-center space-x-6 mb-4">
<div className="text-center">
<div className="text-lg font-bold text-violet">1.2K</div>
<div className="text-xs text-gray-500">Followers</div>
</div>
<div className="text-center">
<div className="text-lg font-bold text-violet">345</div>
<div className="text-xs text-gray-500">Following</div>
</div>
<div className="text-center">
<div className="text-lg font-bold text-violet">89</div>
<div className="text-xs text-gray-500">Posts</div>
</div>
</div>
<!-- Actions -->
<div className="flex space-x-2">
<button className="flex-1 bg-violet-600 text-white py-2 px-4 rounded-md hover:bg-violet-700 transition-colors text-sm font-medium">Follow</button>
<button className="flex-1 border border-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium">Message</button>
</div>
</div>
</div>
);
}