Skeuomorphic Social Share Buttons

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="flex space-x-4">

        <!-- Facebook Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-600 dark:bg-blue-800 text-white rounded-full shadow-lg">
                <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.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.299c-1.213 0-1.587.753-1.587 1.517V12h3.328l-.53 3.663h-2.798V22c4.781-.75 8.437-4.887 8.437-9.878z" />
                </svg>
            </div>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-400 dark:bg-blue-600 text-white rounded-full shadow-lg">
                <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-.004-.357-.012-.534A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.477A4.073 4.073 0 014 10.20c0 .038 0 .077.01.116A11.703 11.703 0 0012.31 21.5a4.141 4.141 0 01-1.854-.054 4.002 4.002 0 01-1.495-.385 4.017 4.017 0 002.965-1.636c-.379-.09-.73-.28-1.014-.542-.283-.263-.51-.59-.656-.954a4.102 4.102 0 01-.166-1.095v-.049c.39.22.84.38 1.301.407a4.011 4.011 0 01-1.791-3.5z" />
                </svg>
            </div>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-700 dark:bg-blue-900 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.583-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
                </svg>
            </div>
        </a>

         <!-- Pinterest Button -->
         <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-red-600 dark:bg-red-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C6.477 0 2 4.477 2 10a8.015 8.015 0 002.161 5.411c-.066.241-.19.763-.217.862-.046.168-.113.471-.127.524-.014.052-.024.08-.024.08l-.001.003a1.04 1.04 0 01-.188.505 1 1 0 00.951 1.349l2.436-.002c.321 0 .627-.148.824-.404.196-.256.392-.786.476-1.042.284-.86.776-2.3.776-2.3.208.36.519.687.89.927A7.947 7.947 0 0012 18a8 8 0 100-16zM8.5 13C7.67 13 7 12.33 7 11.5S7.67 10 8.5 10 10 10.67 10 11.5 9.33 13 8.5 13zm7-2c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8 17 8.67 17 9.5 16.33 11 15.5 11z"/>
                </svg>
            </div>
        </a>

    </div>
</div>