EmpireUI
Sign inGet Pro
Free · MIT · React + Tailwind

Profile Card

A polished profile card for React and Tailwind CSS with avatar, bio, stats and social links, ideal for user and team sections. Free and copy-paste ready.

Ava Martin
Product Designer

Copy the code

export function ProfileCard() {
  return (
    <div className="w-56 rounded-2xl border border-white/10 bg-white/5 p-6 text-center text-white">
      <div className="mx-auto h-16 w-16 rounded-full bg-gradient-to-br from-violet-600 to-pink-500" />
      <h3 className="mt-3 font-bold">Ava Martin</h3>
      <p className="text-sm text-white/60">Product Designer</p>
      <button className="mt-3 w-full rounded-xl border border-white/15 bg-white/10 py-2 font-semibold">
        Follow
      </button>
    </div>
  )
}

Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.

About the profile card

This profile card is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.

Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.

Related cards components

Product CardPricing TableStats CardTestimonial Card