Playful_Pastel_Social_Share_Buttons_for_Booking

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <!-- Share Component Container -->
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl hover:scale-105">
    
    <!-- Header -->
    <div class="text-center space-y-2">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-purple-600 dark:text-purple-300 tracking-tight leading-tight">
        Booked! Share the Joy!
      </h2>
      <p class="text-gray-500 dark:text-gray-300 text-lg sm:text-xl">
        Your appointment is confirmed. Let friends know!
      </p>
    </div>

    <!-- Share Link Section -->
    <div class="bg-purple-100 dark:bg-gray-600 rounded-2xl p-4 sm:p-5 flex flex-col items-center space-y-3">
      <p class="text-purple-700 dark:text-purple-200 font-semibold text-center text-sm sm:text-base">Your unique booking link:</p>
      <div class="relative w-full">
        <input type="text" readonly value="https://booking.example.com/your-booking-id" class="w-full pl-4 pr-12 py-3 rounded-xl bg-purple-50 dark:bg-gray-500 text-purple-800 dark:text-purple-50 font-mono text-sm sm:text-base border-2 border-purple-200 dark:border-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500 transition-all duration-200" aria-label="Booking link">
        <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-purple-400 hover:bg-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 text-white p-2 rounded-lg transition-colors duration-200 group" aria-label="Copy link button">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 3a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.414-1.414A1 1 0 0012.586 3H12V2a1 1 0 10-2 0v1H8z"></path>
          </svg>
          <span class="sr-only group-hover:not-sr-only group-hover:flex absolute right-full top-1/2 -translate-y-1/2 mr-2 bg-gray-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Copied!</span>
        </button>
      </div>
    </div>
    
    <!-- Social Share Buttons Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
      
      <!-- Facebook -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-blue-100 dark:bg-blue-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on Facebook">
        <div class="w-12 h-12 bg-blue-400 dark:bg-blue-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" 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.776-3.89 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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="mt-2 text-blue-800 dark:text-blue-100 font-semibold text-sm sm:text-base">Facebook</span>
      </a>

      <!-- Twitter/X -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-sky-100 dark:bg-sky-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on X/Twitter">
        <div class="w-12 h-12 bg-sky-400 dark:bg-sky-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.797 11.24h-6.768L9.58 13.298 2.25 22H.921l8.326-9.59L.75 2.25H8.08L12 8.314 18.244 2.25zM17.29 20l-1.153-1.32h-1.92L16.29 20H17.29zM4.25 4l-1.153 1.32h1.92L4.25 4zm13.398 1.168L15.3 18.84h2.098L19.348 4.678h-2.098z" />
          </svg>
        </div>
        <span class="mt-2 text-sky-800 dark:text-sky-100 font-semibold text-sm sm:text-base">X/Twitter</span>
      </a>

      <!-- WhatsApp -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-green-100 dark:bg-green-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on WhatsApp">
        <div class="w-12 h-12 bg-green-400 dark:bg-green-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.7.46 3.32 1.36 4.77L2.05 22l5.02-1.32c1.3-.76 2.76-1.17 4.29-1.17h.03c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.24c-.2.33-.8.63-1.16.8-.31.13-.69.2-.95.27-.26.08-.5.14-.73.17-.49.07-1.1-.06-1.63-.33-.5-.26-1.13-.67-1.74-1.25-.61-.57-1.12-1.28-1.5-2-.32-.6-.27-.92-.18-1.1S8.57 11.84 8.2 11.4c-.4-.44-.82-1-.07-1.46.64-.42 1.13.06 1.48.51.34.45.6.93.83 1.43.23.5.38.8.62 1.05.24.25.47.37.76.5.3.12.57.1.8-.02.2-.1.6-1.07.89-1.37.29-.3.5-1.04.2-1.42-.26-.37-.77-.66-1.06-.92-.29-.26-.6-.61-.5-.8C9.65 8.9 12.08 7.37 12.4 7.22c.32-.15.65-.24.98-.21.32.02.66.07.95.14.29.08.57.2.82.35.26.16.48.37.66.58.2.22.39.49.52.79.14.3.29.62.3 1.08.01.55-.38 1.54-.74 2.05-.36.5-1.29 1.77-1.7 2.11z" />
          </svg>
        </div>
        <span class="mt-2 text-green-800 dark:text-green-100 font-semibold text-sm sm:text-base">WhatsApp</span>
      </a>

      <!-- Email -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-red-100 dark:bg-red-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share via Email">
        <div class="w-12 h-12 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.58 6.44a3 3 0 01-3.44 0L1.5 8.67z" />
            <path d="M22.5 6.55L14.73 0 12 2.29 9.27 0 1.5 6.55v.62a3 3 0 00.86 1.83L12 17.06l9.64-8.06a3 3 0 00.86-1.83V6.55z" />
          </svg>
        </div>
        <span class="mt-2 text-red-800 dark:text-red-100 font-semibold text-sm sm:text-base">Email</span>
      </a>

      <!-- LinkedIn -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-blue-50 dark:bg-blue-900 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on LinkedIn">
        <div class="w-12 h-12 bg-blue-300 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M0 0h24v24H0z" fill="none" />
            <path 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.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
          </svg>
        </div>
        <span class="mt-2 text-blue-700 dark:text-blue-100 font-semibold text-sm sm:text-base">LinkedIn</span>
      </a>

      <!-- More Options -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="More sharing options">
        <div class="w-12 h-12 bg-gray-400 dark:bg-gray-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7 6H5v12h2V6zm8.659 3l-1.394 6H13.62L15 9h-2.341l-1.394 6h-1.63L11 9H8V8h4l1.341 6h1.63L15 8h-2.341l1.394-6H16l1.341 6h-2.341l-1.394-6h-1.63L13 2H8L7.029 6H5v12h2V6h1.62l1.394-6H13.727l1.394 6h1.63L17 22h-1.63z" clip-rule="evenodd" />
            <circle cx="19" cy="12" r="2" />
          </svg>
        </div>
        <span class="mt-2 text-gray-800 dark:text-gray-100 font-semibold text-sm sm:text-base">More...</span>
      </a>

    </div>

  </div>
</div>