소셜 미디어 컨테이너

<div class="container mx-auto p-4 md:p-8 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black rounded-lg shadow-xl">
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <h2 class="text-xl font-bold text-white dark:text-gray-200">User Profile</h2>
    </div>
    <button class="px-4 py-2 bg-white bg-opacity-20 text-white text-sm font-semibold rounded-full hover:bg-opacity-30 transition-all duration-300 ease-in-out">Follow</button>
  </div>

  <p class="text-white dark:text-gray-300 leading-relaxed mb-6">
    This is a sample container component for social media interfaces. It features vibrant colors, subtle hover effects for buttons, and is fully responsive.
  </p>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
      <h3 class="text-lg font-semibold text-white mb-2">Recent Post</h3>
      <p class="text-white text-sm dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    </div>
    <div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
      <h3 class="text-lg font-semibold text-white mb-2">Notifications</h3>
      <p class="text-white text-sm dark:text-gray-300">You have 3 new notifications. ...</p>
    </div>
  </div>

  <div class="mt-6 pt-4 border-t border-white border-opacity-20 flex justify-around text-white">
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Messages</a>
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Settings</a>
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Logout</a>
  </div>
</div>