Home
ORGIN_DREAMS
Super Profile

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 CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile

Author ORGIN_DREAMS

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

profile
user profile

Author:
gidy

2 weeks ago

5
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

3 weeks ago

116
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

7 months ago

1.7k
Profile Card

Author:
Mr Robot

2 years ago

11k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

5.2k
User | Author profile card

Author:
Computer guy

1 year ago

7.3k
Blog Author Card

Author:
EliteAI Tools

5 months ago

841
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2k
The Future of Web Development
love my product

Author:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

131
Twitter like users list

Author:
Simon Scheffer

2 years ago

11.3k
Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

3 weeks ago

55
Show user details

Author:
Lucas Martinez

2 years ago

24.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components