소셜 구성 요소 구성 요소

<div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-800 text-stone-800 dark:text-stone-200 min-h-screen">
  <div class="max-w-xs mx-auto bg-amber-100 dark:bg-zinc-700 shadow-md shadow-stone-300 dark:shadow-zinc-900 rounded-lg overflow-hidden border border-amber-200 dark:border-zinc-600 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-stone-400 dark:hover:shadow-zinc-950">
    <div class="relative p-4 sm:p-5 border-b border-amber-200 dark:border-zinc-600">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-semibold text-stone-700 dark:text-stone-100">User Profile</h3>
        <button aria-label="Settings" class="text-stone-500 dark:text-stone-300 hover:text-stone-700 dark:hover:text-stone-100 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-amber-300 dark:border-zinc-500 mb-4 object-cover shadow-sm shadow-stone-300 dark:shadow-zinc-900" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-700 dark:text-stone-100 mb-1">Jane Doe</h4>
      <p class="text-sm text-stone-500 dark:text-stone-300 mb-4">Verified Buyer</p>
      <div class="flex space-x-4 mb-4">
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">124</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">89</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Following</p>
        </div>
      </div>
      <button class="w-full py-2 px-4 rounded-md bg-rose-500 dark:bg-rose-700 text-white text-base font-medium shadow-sm transition-all duration-200 ease-in-out hover:bg-rose-600 dark:hover:bg-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-400 dark:focus:ring-rose-600 focus:ring-opacity-75">
        View Profile
      </button>
    </div>
    <div class="p-4 sm:p-5 border-t border-amber-200 dark:border-zinc-600 bg-amber-50 dark:bg-zinc-800 text-center">
      <p class="text-xs text-stone-500 dark:text-stone-400">Last active 2 hours ago</p>
    </div>
  </div>
</div>