Super Profile

This an if look like profile

This tailwind example is contributed by ORGIN_DREAMS, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Profile

Author ORGIN_DREAMS

Tailwind v3.4 1.4k 5

Fork Fullscreen

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  
  <div class="p-6">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="h-16 w-16 rounded-full object-cover border-2 border-pink-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Profile picture">
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-lg font-bold text-gray-900 truncate">Sarah Johnson</p>
        <p class="text-sm text-gray-500 truncate">Photographer & Traveler</p>
        <div class="flex space-x-4 mt-2">
          <span class="text-sm font-medium text-gray-900">542 <span class="font-normal text-gray-500">posts</span></span>
          <span class="text-sm font-medium text-gray-900">12.8k <span class="font-normal text-gray-500">followers</span></span>
          <span class="text-sm font-medium text-gray-900">328 <span class="font-normal text-gray-500">following</span></span>
        </div>
      </div>
    </div>
    <div class="mt-4">
      <p class="text-gray-700">Capturing moments around the world 🌍 | Based in NYC | Prints available</p>
    </div>
    <div class="mt-4 flex space-x-2">
      <button class="flex-1 bg-pink-500 hover:bg-pink-600 text-white font-bold py-1 px-4 rounded-lg text-sm">
        Follow
      </button>
      <button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-1 px-4 rounded-lg text-sm">
        Message
      </button>
      <button class="p-1 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
        </svg>
      </button>
    </div>
  </div>
  
  
  <div class="px-6 pb-4 overflow-x-auto">
    <div class="flex space-x-4">
      <div class="flex flex-col items-center">
        <div class="h-16 w-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-500 p-0.5">
          <div class="h-full w-full rounded-full bg-white p-0.5">
            <img class="h-full w-full rounded-full object-cover" src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Travel">
          </div>
        </div>
        <span class="text-xs mt-1">Travel</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="h-16 w-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-500 p-0.5">
          <div class="h-full w-full rounded-full bg-white p-0.5">
            <img class="h-full w-full rounded-full object-cover" src="https://images.unsplash.com/photo-1530785602389-07594beb8b73?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portraits">
          </div>
        </div>
        <span class="text-xs mt-1">Portraits</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="h-16 w-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-500 p-0.5">
          <div class="h-full w-full rounded-full bg-white p-0.5">
            <img class="h-full w-full rounded-full object-cover" src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Food">
          </div>
        </div>
        <span class="text-xs mt-1">Food</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="h-16 w-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-500 p-0.5">
          <div class="h-full w-full rounded-full bg-white p-0.5">
            <img class="h-full w-full rounded-full object-cover" src="https://plus.unsplash.com/premium_photo-1673292293042-cafd9c8a3ab3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Nature">
          </div>
        </div>
        <span class="text-xs mt-1">Nature</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="h-16 w-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-500 p-0.5">
          <div class="h-full w-full rounded-full bg-white p-0.5">
            <div class="h-full w-full rounded-full bg-gray-100 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
          </div>
        </div>
        <span class="text-xs mt-1">New</span>
      </div>
    </div>
  </div>
  
  
  <div class="grid grid-cols-3 gap-1">
    <div class="aspect-square bg-gray-100 relative group">
      <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1652057014611-3cded0a00d20?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post">
      <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
        <div class="flex space-x-4 text-white">
          <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /></svg> 245</span>
          <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" /></svg> 31</span>
        </div>
      </div>
    </div>
    <div class="aspect-square bg-gray-100 relative group">
      <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1569639399770-d9b90d46d5d8?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post">
      <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
        <div class="flex space-x-4 text-white">
          <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /></svg> 189</span>
          <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" /></svg> 14</span>
        </div>
      </div>
    </div>
    <div class="aspect-square bg-gray-100 relative group">
      <img class="w-full h-full object-cover" src="https://plus.unsplash.com/premium_photo-1682656220562-32fde8256295?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post">
      <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200">
        <div class="flex space-x-4 text-white">
          <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /></svg> 312</span>
          <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" /></svg> 42</span>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Author box

Mr Robot

3 years ago

12.5k
Visernic Profile

MD Mostafa Niloy

11 months ago

1.2k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Steve NGOYA

1 year ago

1.6k
Stacked Profile
Stacked profile images

Mitch Chimwemwe Chanza

2 years ago

8.1k
Show user details

Lucas Martinez

3 years ago

26.2k
Card
Profile Card

Manuel Dala

1 year ago

1.8k
Flex Profile
Tailwind Flex User Profile

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.8k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
User | Author profile card template

Computer guy

3 years ago

10k
nextjs-profile-card-tailwind

Tailwind Free Snippets

2 years ago

2.6k
User profile card

Mr Robot

3 years ago

12k