소셜 공유 버튼

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="flex space-x-4 p-6 bg-white rounded-lg shadow-xl dark:bg-gray-700">
        <!-- Facebook Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.896 3.776-3.896 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
            </svg>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.143 8.143 0 0022 5.92a8.11 8.11 0 01-2.357.646 4.114 4.114 0 001.816-2.274c-.82-.485-1.73-.84A4.081 4.081 0 0010.95 3.515 4.121 4.121 0 007.07 6.5c0 .255.03.503.08.746A11.62 11.62 0 012.817 4.71a4.103 4.103 0 001.27 5.475 4.073 4.073 0 01-1.852-.514c0 0 0 .055 0 .088a4.118 4.118 0 003.306 4.032 4.202 4.202 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
            </svg>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 3a2 2 0 00-2-2H7a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3zM9 8a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1 1 1 0 01-1 1H9zm6 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1zm0 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1z" clip-rule="evenodd" />
                <path d="M12 18a3 3 0 100-6 3 3 0 000 6z" />
            </svg>
        </a>
    </div>
</div>