Social Components Component

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-transform transform hover:scale-105 duration-300 ease-in-out">
    <div class="flex items-center space-x-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-700 dark:text-gray-300">This is a sample post demonstrating social media interactions with engaging microinteractions.</p>
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Like
        </button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Comment
        </button>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Share
        </button>
    </div>
</div>