User Profiles Component

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="relative">
      <img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
      <div class="absolute inset-0 bg-blue-500 opacity-40"></div>
    </div>
    <div class="relative z-10 -mt-16 flex items-center justify-center">
      <img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
    </div>
    <div class="text-center p-6">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
      <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
      </div>
    </div>
     <div class="p-6 border-t border-gray-200 dark:border-gray-700">
      <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
      <ul class="space-y-4">
        <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
          </div>
        </li>
         <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>