ユーザープロファイルコンポーネント

<div class="font-sans bg-pink-100 text-purple-900 min-h-screen p-4 sm:p-8 dark:bg-purple-900 dark:text-pink-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-8 sm:mb-12 dark:text-pink-300 tracking-tight leading-tight uppercase relative">
      <span class="block">Our Esteemed Contributors</span>
      <span class="block text-2xl sm:text-3xl text-purple-600 dark:text-pink-200 mt-2 font-medium">Meet the Minds Behind the Stories</span>
      <div class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-purple-500 dark:bg-pink-400 mt-4 rounded-full"></div>
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 sm:mb-16 max-w-3xl mx-auto dark:text-purple-200">
      Discover the talented individuals who bring you the latest news and in-depth analysis. Each profile offers a glimpse into their expertise and contributions.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

      <!-- Profile Card 1 -->
      <article class="relative bg-gradient-to-br from-pink-300 to-red-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-indigo-600 dark:to-blue-800">
        <div class="absolute inset-0 bg-pink-400 opacity-20 dark:bg-blue-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Jane Doe</h2>
          <p class="text-lg text-pink-900 font-semibold mb-3 dark:text-purple-300">Senior Journalist</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">5.2K Followers</span>
          </div>
          <p class="text-sm text-pink-900 mb-6 line-clamp-3 dark:text-purple-200">Specializing in investigative journalism and political analysis. Jane has been breaking stories for over a decade...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300 transform hover:scale-105 transition-all duration-200 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 2 -->
      <article class="relative bg-gradient-to-br from-blue-300 to-green-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-pink-600 dark:to-orange-800">
         <div class="absolute inset-0 bg-blue-400 opacity-20 dark:bg-orange-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Profile of John Smith">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">John Smith</h2>
          <p class="text-lg text-blue-900 font-semibold mb-3 dark:text-purple-300">Tech Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">8.1K Followers</span>
          </div>
          <p class="text-sm text-blue-900 mb-6 line-clamp-3 dark:text-purple-200">Covering the latest in gadgets, software, and digital trends. John's insights are always cutting-edge...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transform hover:scale-105 transition-all duration-200 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 3 -->
      <article class="relative bg-gradient-to-br from-yellow-300 to-orange-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-green-600 dark:to-teal-800">
         <div class="absolute inset-0 bg-yellow-400 opacity-20 dark:bg-teal-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile of Emily White">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Emily White</h2>
          <p class="text-lg text-orange-900 font-semibold mb-3 dark:text-purple-300">Culture Reporter</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">3.9K Followers</span>
          </div>
          <p class="text-sm text-orange-900 mb-6 line-clamp-3 dark:text-purple-200">Exploring arts, entertainment, and social trends. Emily brings a fresh perspective to cultural discourse...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-orange-600 text-white font-bold rounded-full shadow-lg hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 transform hover:scale-105 transition-all duration-200 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 4 -->
      <article class="relative bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-red-600 dark:to-yellow-800">
         <div class="absolute inset-0 bg-purple-400 opacity-20 dark:bg-yellow-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile of David Lee">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">David Lee</h2>
          <p class="text-lg text-indigo-900 font-semibold mb-3 dark:text-purple-300">Sports Analyst</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">6.7K Followers</span>
          </div>
          <p class="text-sm text-indigo-900 mb-6 line-clamp-3 dark:text-purple-200">Providing expert analysis on global sports events. David's predictions are a must-read for any fan...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transform hover:scale-105 transition-all duration-200 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 5 -->
      <article class="relative bg-gradient-to-br from-teal-300 to-cyan-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-purple-600 dark:to-fuchsia-800">
         <div class="absolute inset-0 bg-teal-400 opacity-20 dark:bg-fuchsia-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/72.jpg" alt="Profile of Sarah Chen">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Sarah Chen</h2>
          <p class="text-lg text-cyan-900 font-semibold mb-3 dark:text-purple-300">Economics Correspondent</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">4.5K Followers</span>
          </div>
          <p class="text-sm text-cyan-900 mb-6 line-clamp-3 dark:text-purple-200">Reporting on global market trends and economic policies. Sarah's analysis clarifies complex financial news...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-cyan-600 text-white font-bold rounded-full shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 transform hover:scale-105 transition-all duration-200 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 dark:focus:ring-fuchsia-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 6 -->
      <article class="relative bg-gradient-to-br from-lime-300 to-emerald-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-cyan-600 dark:to-lime-800">
         <div class="absolute inset-0 bg-lime-400 opacity-20 dark:bg-lime-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile of Mark Johnson">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Mark Johnson</h2>
          <p class="text-lg text-emerald-900 font-semibold mb-3 dark:text-purple-300">Science Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">7.0K Followers</span>
          </div>
          <p class="text-sm text-emerald-900 mb-6 line-clamp-3 dark:text-purple-200">Breaking down complex scientific discoveries into understandable news. Mark's passion for science is infectious...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white font-bold rounded-full shadow-lg hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-300 transform hover:scale-105 transition-all duration-200 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

    </div>

     <div class="flex justify-center mt-12 sm:mt-16">
        <button class="px-8 py-4 bg-purple-600 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-300 transform hover:scale-105 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-400">
            Load More Contributors
        </button>
    </div>
  </div>
</div>