Social Components Component

<div class="bg-amber-400 dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h1 class="text-4xl font-bold text-center text-brown-600 dark:text-yellow-400">Retro Social Media</h1>
    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-lg font-semibold text-black dark:text-white">John Doe</h2>
                <p class="text-gray-700 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Just enjoyed a retro gaming night! Who's up for some Mario Kart? 🎮</p>
        <img class="mt-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Retro Gaming">
        <div class="mt-4 flex justify-between">
            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">Like ❤️</button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">Comment 💬</button>
            <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600">Share 🔗</button>
        </div>
    </div>

    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-lg font-semibold text-black dark:text-white">Recent Posts</h3>
        <div class="mt-4 space-y-4">
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-300">Loved the concert last night! 🎤</p>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Mike Lee</h4>
                    <p class="text-gray-600 dark:text-gray-300">Throwback to my first Car Rally! 🚗</p>
                </div>
            </div>
        </div>
    </div>
</div>