cardprofilebeginner

Profile Card

A user profile card with avatar, name, bio, and social follow stats.

Preview

Alice Smith

Product Designer at Figma

1.2k Followers

348 Following

<div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-xs">
  <div class="h-24 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
  <div class="px-6 pb-6 -mt-12 text-center">
    <div class="w-20 h-20 rounded-full bg-white border-4 border-white mx-auto mb-3 flex items-center justify-center text-2xl font-bold text-violet-600 bg-violet-100">AS</div>
    <h3 class="text-lg font-bold text-gray-800">Alice Smith</h3>
    <p class="text-sm text-gray-500 mb-4">Product Designer at Figma</p>
    <div class="flex justify-center gap-6 text-sm">
      <div><span class="font-bold text-gray-800">1.2k</span> <span class="text-gray-400">Followers</span></div>
      <div><span class="font-bold text-gray-800">348</span> <span class="text-gray-400">Following</span></div>
    </div>
  </div>
</div>

Color Breakdown

Banner Start

from-violet-500

#8b5cf6

Banner End

to-fuchsia-500

#d946ef

Avatar Background

bg-violet-100

#ede9fe

Avatar Text

text-violet-600

#7c3aed

Name

text-gray-800

#1f2937

Bio

text-gray-500

#6b7280

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:text-white

Use Cases

Social media profilesTeam member pagesUser dashboards

Browser Support

All modern browsers.

Related Recipes

Social Button

button - beginner

Glassmorphism Card

card - intermediate

Neumorphism Card

card - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I use a real photo instead of initials?▼

Replace the initials div with <img src='photo.jpg' class='w-20 h-20 rounded-full border-4 border-white mx-auto object-cover' />.