User Profiles Component

  <div class="relative h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center">
    <div class="container mx-auto p-6">
      <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
        <div class="relative h-48 bg-gray-300 dark:bg-gray-700">
          <img class="w-full h-full object-cover object-center" src="https://picsum.photos/seed/random/800/400" alt="Background">
          <div class="absolute inset-0 bg-black opacity-25"></div>
        </div>
        <div class="relative px-6 pb-6 mt-[-70px]">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-white dark:border-gray-800">
                <img class="w-full h-full object-cover object-center" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
              </div>
              <h3 class="text-gray-900 dark:text-white text-2xl font-semibold">John Doe</h3>
            </div>
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
            </button>
          </div>
          <p class="mt-4 text-gray-700 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex justify-around items-center mt-6">
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">1.2K</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Followers</p>
            </div>
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">500</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Following</p>
            </div>
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">10K</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Likes</p>
            </div>
          </div>
          <div class="mt-6">
            <h4 class="text-gray-900 dark:text-white text-lg font-semibold">Recent Activity</h4>
            <ul class="mt-4 space-y-3">
              <li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
                <span>Posted a new article</span>
              </li>
              <li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Liked a post</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>