소셜 미디어 인터랙티브 컴포넌트

<div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.005] transition-all duration-300 border border-green-200 dark:border-green-800 relative">
    
    <!-- Glowing Border Effect for Dark Mode -->
    <div class="absolute inset-0 rounded-xl pointer-events-none dark:animate-pulse-light dark:border-4 dark:border-green-500 dark:shadow-[0_0_15px_rgba(34,197,94,0.7),inset_0_0_10px_rgba(34,197,94,0.5)] transition-all duration-300"></div>

    <!-- Header -->
    <div class="relative flex items-center justify-between p-4 sm:p-6 bg-gradient-to-r from-green-500 to-emerald-600 dark:from-green-700 dark:to-emerald-900 border-b border-green-400 dark:border-green-700 backdrop-blur-sm shadow-md">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight relative">
        Social Feed
        <span class="absolute -bottom-1 left-0 w-full h-1 bg-white dark:bg-green-300 rounded-full animate-pulse-line"></span>
      </h1>
      <div class="relative inline-flex flex-col items-end">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white dark:border-green-300 shadow-lg glow-shadow-sm transition-transform hover:scale-110">
        <span class="block text-xs text-white mt-1 sm:mt-2 font-semibold glow-text-sm dark:text-green-200">@glowing_user</span>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="p-4 sm:p-6 lg:p-8 space-y-8">

      <!-- Post 1 -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-lg border border-green-200 dark:border-green-600 relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:dark:shadow-[0_0_20px_rgba(34,197,94,0.6)] group">
        <div class="absolute inset-0 bg-gradient-to-r from-green-300/20 to-lime-300/20 dark:from-green-600/20 dark:to-lime-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="flex items-start mb-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile picture of Jane Doe" class="w-12 h-12 rounded-full mr-3 border-2 border-green-400 dark:border-green-500 shadow-md glow-shadow-xs">
          <div>
            <p class="text-lg font-semibold text-green-800 dark:text-green-300">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@janedoe • 2 hours ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4 relative z-10">
          Absolutely loving the new update! So many exciting features to explore. What's your favorite part?
        </p>
        <img src="https://picsum.photos/600/400?random=1" alt="Placeholder image for post" class="w-full rounded-md object-cover h-48 sm:h-64 mb-4 border border-green-300 dark:border-green-600 shadow-md transform hover:scale-[1.01] transition-transform duration-300 relative z-10">

        <!-- Interactive Buttons -->
        <div class="flex justify-around items-center border-t border-green-200 dark:border-green-700 pt-4 relative z-10">
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            <span class="text-sm font-medium">1.2K</span>
            <span class="absolute inset-0 bg-green-500/20 dark:bg-green-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(34,197,94,0.7)]"></span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            <span class="text-sm font-medium">345</span>
            <span class="absolute inset-0 bg-blue-500/20 dark:bg-blue-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(59,130,246,0.7)]"></span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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="M8.684 13.342C8.882 14.2 9.872 15 11 15c1.128 0 2.118-.8 2.316-1.658M11 20v-5m0 0a2 2 0 11-2-2h4a2 2 0 11-2 2zM15 4c-5.82 2.89-8.48 7.39-10 12h14c-1.52-4.61-4.18-9.11-10-12z"></path></svg>
            <span class="text-sm font-medium">78</span>
            <span class="absolute inset-0 bg-purple-500/20 dark:bg-purple-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(168,85,247,0.7)]"></span>
          </button>
        </div>
      </div>

      <!-- Post 2 (simpler) -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-lg border border-green-200 dark:border-green-600 relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:dark:shadow-[0_0_20px_rgba(34,197,94,0.6)] group">
        <div class="absolute inset-0 bg-gradient-to-r from-green-300/20 to-lime-300/20 dark:from-green-600/20 dark:to-lime-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="flex items-start mb-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="Profile picture of John Smith" class="w-12 h-12 rounded-full mr-3 border-2 border-green-400 dark:border-green-500 shadow-md glow-shadow-xs">
          <div>
            <p class="text-lg font-semibold text-green-800 dark:text-green-300">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@johnsmith • 1 day ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4 relative z-10">
          Just finished a great coding session! Feeling productive. Share your weekend plans!
        </p>
        <div class="flex justify-around items-center border-t border-green-200 dark:border-green-700 pt-4 relative z-10">
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            <span class="text-sm font-medium">256</span>
            <span class="absolute inset-0 bg-green-500/20 dark:bg-green-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(34,197,94,0.7)]"></span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            <span class="text-sm font-medium">88</span>
            <span class="absolute inset-0 bg-blue-500/20 dark:bg-blue-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(59,130,246,0.7)]"></span>
          </button>
        </div>
      </div>
    </div>

    <!-- Compose Post / Call to Action -->
    <div class="p-4 sm:p-6 bg-gradient-to-l from-green-500 to-emerald-600 dark:from-green-700 dark:to-emerald-900 border-t border-green-400 dark:border-green-700 backdrop-blur-sm shadow-md flex items-center justify-between">
      <input type="text" placeholder="What's on your mind?" class="flex-grow p-3 rounded-lg bg-green-50 text-green-900 dark:bg-gray-800 dark:text-green-200 placeholder-green-700 dark:placeholder-green-400 border border-green-300 dark:border-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:focus:ring-green-300 transition-all duration-200 shadow-inner mr-4">
      <button class="px-5 py-3 bg-white text-green-700 font-bold rounded-lg shadow-lg hover:bg-green-100 dark:bg-green-600 dark:text-white dark:hover:bg-green-500 transition-all duration-300 transform hover:scale-105 active:scale-95 relative glow-effect-button overflow-hidden">
        <span class="relative z-10">Post</span>
        <span class="absolute inset-0 bg-green-400 dark:bg-green-300 mix-blend-multiply opacity-0 hover:opacity-100 transition-opacity duration-300 blur-sm"></span>
      </button>
    </div>

  </div>

  <!-- Custom Styles for glow effects -->
  <style>
    @keyframes pulse-light {
      0%, 100% {
        border-color: rgba(34, 197, 94, 0.7);
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.7), inset 0 0 10px rgba(34, 197, 94, 0.5);
      }
      50% {
        border-color: rgba(59, 230, 110, 0.9);
        box-shadow: 0 0 25px rgba(59, 230, 110, 0.9), inset 0 0 15px rgba(59, 230, 110, 0.7);
      }
    }

    .dark\:animate-pulse-light {
      animation: pulse-light 3s infinite alternate;
    }

    @keyframes pulse-line {
      0%, 100% {
        transform: scaleX(0.8);
        opacity: 0.7;
      }
      50% {
        transform: scaleX(1);
        opacity: 1;
      }
    }

    .animate-pulse-line {
      animation: pulse-line 2s infinite alternate;
    }

    .glow-shadow-sm {
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 0 4px rgba(34, 197, 94, 0.2) !important;
    }

    .glow-text-sm {
      text-shadow: 0 0 5px rgba(255,255,255,0.7), 0 0 10px rgba(255,255,255,0.5);
    }

    html.dark .glow-text-sm {
      text-shadow: 0 0 5px rgba(34, 197, 94, 0.9), 0 0 10px rgba(34, 197, 94, 0.7);
    }

    .glow-effect-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;
      pointer-events: none;
      z-index: 0;
    }

    html.dark .glow-effect-button:before {
      box-shadow: 0 0 15px rgba(34, 197, 94, 0.7);
      background: radial-gradient(circle at center, rgba(34, 197, 94, 0.8) 0%, transparent 70%);
      opacity: 0;
    }

    html.dark .glow-effect-button:hover:before {
      transform: scale(1.1);
      opacity: 1;
    }
  </style>
</div>