Composants Boutons de partage social Playful_Pastel_Social_Share_Buttons_for_Booking

Playful_Pastel_Social_Share_Buttons_for_Booking

Un composant complexe, ludique et amusant des boutons de partage social avec une palette de couleurs pastel, adapté aux systèmes de réservation et de réservation. Dispose d’éléments arrondis, d’une esthétique joyeuse, d’une réactivité totale et d’une prise en charge du mode sombre.

Aperçu

HTML Code

<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>

Composants associés

Composant Boutons de partage social

Un composant de partage social propre et minimaliste pour les interfaces finance/banque, avec du noir, du blanc et une couleur d’accentuation, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir

Composant Boutons de partage social

Boutons de partage social inspirés du Bauhaus pour les applications de sport/fitness, avec des formes géométriques et des tons bleus. Réactif avec prise en charge du mode sombre.

Ouvrir

Boutons de partage social

Boutons de partage social dotés d’un design réactif, d’une prise en charge du thème sombre et d’une esthétique 3D. Aucun JavaScript n’est requis.

Ouvrir