Social Share Buttons Component

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

    <!-- Facebook Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M14 13.5H16.5L17.5 9.5H14V6.5C14 5.48473 14.156 5.24436 14.6293 4.96695C15.1027 4.68953 15.6568 4.5 16.0357 4.5H17.5V0.849C17.2023 0.816436 16.2943 0.75 15.1633 0.75C12.8711 0.75 11.2335 2.1265 11.2335 4.88457V9.5H8.5V13.5H11.2335V23.25H14V13.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-400 dark:hover:bg-blue-500 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M22.46 6C21.64 6.36 20.76 6.61 19.86 6.74C20.79 6.18 21.46 5.34 21.82 4.3C20.93 4.84 19.98 5.22 18.96 5.43C18.13 4.56 16.92 4 15.58 4C12.87 4 10.63 6.22 10.63 8.94C10.63 9.38 10.68 9.8 10.79 10.2C7.38 8.44 5.02 5.56 3.4 2.5C2.97 3.24 2.76 4.08 2.76 4.95C2.76 6.7 3.69 8.27 5.16 9.19C4.31 9.17 3.49 8.93 2.76 8.5V8.5C2.76 10.87 4.41 12.87 6.64 13.33C6.22 13.44 5.79 13.49 5.35 13.49C5.04 13.49 4.74 13.46 4.44 13.39C5.07 15.34 6.89 16.82 9.08 16.86C7.3 18.23 5.08 19.06 2.76 19.06C2.37 19.06 1.99 19.04 1.62 18.99C3.84 20.44 6.47 21.25 9.28 21.25C15.55 21.25 19.02 15.93 19.02 11.2V10.7C19.68 10.15 20.26 9.5 20.74 8.78C20.1 9.15 19.4 9.4 18.66 9.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-400 dark:bg-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20.447 20.452H15.962V13.816C15.962 12.181 15.207 11.018 13.731 11.018C12.585 11.018 11.859 11.83 11.531 12.639C11.406 12.946 11.378 13.342 11.378 13.738V20.452H6.941V6.993H11.378V8.922C11.968 7.822 13.076 6.782 15.226 6.782C18.175 6.782 20.447 8.653 20.447 13.382V20.452ZM2.542 4.792C1.144 4.792 0 3.714 0 2.436C0 1.159 1.144 0.081 2.542 0.081C3.898 0.081 5.042 1.159 5.042 2.436C5.042 3.714 3.898 4.792 2.542 4.792ZM4.721 20.452H0.285V6.993H4.721V20.452Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-700 dark:bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-pink-600 dark:hover:bg-pink-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2C8.686 2 8.257 2.012 6.974 2.07C5.69 2.128 4.734 2.378 3.89 2.709C2.96 3.067 2.185 3.655 1.54 4.298C0.898 4.94 0.312 5.714 0.003 6.645C-0.08 7.042 -0.009 7.439 0 7.836V16.164C0.009 16.561 0.08 16.958 0.003 17.355C0.312 18.286 0.898 19.06 1.54 19.702C2.185 20.345 2.96 20.933 3.89 21.291C4.734 21.622 5.69 21.872 6.974 21.93C8.257 21.988 8.686 22 12 22C15.314 22 15.743 21.988 17.026 21.93C18.31 21.872 19.266 21.622 20.11 21.291C21.04 20.933 21.815 20.345 22.46 19.702C23.102 19.06 23.688 18.286 23.997 17.355C24.08 16.958 24.009 16.561 24 16.164V7.836C24.009 7.439 24.08 7.042 23.997 6.645C23.688 5.714 23.102 4.94 22.46 4.298C21.815 3.655 21.04 3.067 20.11 2.709C19.266 2.378 18.31 2.128 17.026 2.07C15.743 2.012 15.314 2 12 2ZM12 4C15.289 4 15.69 4.013 16.93 4.068C18.152 4.123 18.784 4.303 19.262 4.475C19.742 4.647 20.082 4.887 20.407 5.212C20.732 5.537 20.972 5.877 21.144 6.357C21.316 6.835 21.496 7.468 21.551 8.69C21.606 9.932 21.619 10.332 21.619 12C21.619 13.668 21.606 14.068 21.551 15.308C21.496 16.53 21.316 17.162 21.144 17.64C20.972 18.118 20.732 18.458 20.407 18.783C20.082 19.108 19.742 19.348 19.262 19.52C18.784 19.692 18.152 19.872 16.93 19.927C15.69 19.982 15.289 19.995 12 19.995C8.711 19.995 8.31 19.982 7.07 19.927C5.848 19.872 5.216 19.692 4.738 19.52C4.258 19.348 3.918 19.108 3.593 18.783C3.268 18.458 3.028 18.118 2.856 17.64C2.684 17.162 2.504 16.53 2.449 15.308C2.394 14.068 2.381 13.668 2.381 12C2.381 10.332 2.394 9.932 2.449 8.69C2.504 7.468 2.684 6.835 2.856 6.357C3.028 5.877 3.268 5.537 3.593 5.212C3.918 4.887 4.258 4.647 4.738 4.475C5.216 4.303 5.848 4.123 7.07 4.068C8.31 4.013 8.711 4 12 4ZM12 8C9.791 8 8 9.791 8 12C8 14.209 9.791 16 12 16C14.209 16 16 14.209 16 12C16 9.791 14.209 8 12 8ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14ZM18.529 6.27C18.125 6.27 17.79 5.935 17.79 5.531C17.79 5.127 18.125 4.792 18.529 4.792C18.933 4.792 19.268 5.127 19.268 5.531C19.268 5.935 18.933 6.27 18.529 6.27Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-pink-500 dark:bg-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

  </div>
</div>