Skeuomorphic_Social_Buttons

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="flex flex-wrap gap-6 p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-700 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-600">

    <!-- Skeuomorphic Button 1: Like -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-purple-300 dark:border-purple-600 
                   border-b border-l border-pink-700 dark:border-pink-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Like</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 2: Share -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-blue-300 dark:border-blue-600 
                   border-b border-l border-cyan-700 dark:border-cyan-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 dark:from-blue-600 dark:to-cyan-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.2.09-.4.09-.6s-.04-.4-.09-.6l7.14-4.11c.52.48 1.2.78 1.96.78 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .2.04.4.09.6L8.04 9.81c-.52-.48-1.2-.78-1.96-.78-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.14 4.11c-.05.2-.09.4-.09.6 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Share</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 3: Comment -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-green-500 to-yellow-500 dark:from-green-700 dark:to-yellow-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-green-300 dark:border-green-600 
                   border-b border-l border-yellow-700 dark:border-yellow-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-green-400 to-yellow-400 dark:from-green-600 dark:to-yellow-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6V6h12v8z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Comment</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 4: Send Message (Icon Only on small screens) -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-red-300 dark:border-red-600 
                   border-b border-l border-orange-700 dark:border-orange-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
        <span class="hidden sm:inline-block absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Message</span>
      </div>
    </button>

  </div>
</div>