Interactive Components Component

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-neumorph p-6 w-80 text-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-md mb-4">
        <div class="mb-2">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mx-auto shadow-md">
        </div>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        <button class="mt-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg shadow-neumorph transform transition-all hover:scale-105 hover:shadow-lg">Follow</button>
    </div>
</div>

<style>
    .shadow-neumorph {
        box-shadow:  8px 8px 15px rgba(0, 0, 0, 0.1), 
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
</style>