Rechercher des composants

Catégories

Composants Boutons de partage social

Boutons de partage social

Boutons de partage de contenu sur les réseaux sociaux

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 Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="flex space-x-4 p-6 bg-white rounded-lg shadow-xl dark:bg-gray-700">
        <!-- Facebook Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <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.79c0-2.508 1.493-3.896 3.776-3.896 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.33v6.988C18.343 21.128 22 16.991 22 12z" />
            </svg>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <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 0-.35-.012-.523A8.143 8.143 0 0022 5.92a8.11 8.11 0 01-2.357.646 4.114 4.114 0 001.816-2.274c-.82-.485-1.73-.84A4.081 4.081 0 0010.95 3.515 4.121 4.121 0 007.07 6.5c0 .255.03.503.08.746A11.62 11.62 0 012.817 4.71a4.103 4.103 0 001.27 5.475 4.073 4.073 0 01-1.852-.514c0 0 0 .055 0 .088a4.118 4.118 0 003.306 4.032 4.202 4.202 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
            </svg>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 3a2 2 0 00-2-2H7a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3zM9 8a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1 1 1 0 01-1 1H9zm6 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1zm0 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1z" clip-rule="evenodd" />
                <path d="M12 18a3 3 0 100-6 3 3 0 000 6z" />
            </svg>
        </a>
    </div>
</div>

Skeuomorphic Boutons de partage social

Un ensemble de boutons de partage social stylisés avec un design Skeuomorphic utilisant Tailwind CSS. Comprend des dégradés, des ombres et des effets de survol/actif pour simuler des boutons physiques. Le composant est réactif et inclut la prise en charge du mode sombre via CSS. Contient des boutons pour Facebook, Twitter, LinkedIn et un bouton générique de copie de lien.

Ouvrir Aperçu

                <div class="flex flex-wrap gap-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <!-- Facebook Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-500 to-blue-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-700 dark:to-blue-900 dark:shadow-blue-900/50 dark:hover:shadow-blue-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" 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.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path></svg>
    Share on Facebook
  </a>

  <!-- Twitter Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-cyan-400 to-cyan-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-cyan-600 dark:to-cyan-800 dark:shadow-cyan-800/50 dark:hover:shadow-cyan-800/70">
     <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26L21.69 17.25h-2.918l-5.451-5.66L8.29 17.25H1.997l7.226-8.26L2.1 2.25h3.308l5.249 5.4l5.45-5.4zM18.088 19.5H22V17.25h-1.774c-.381 0-.736-.188-.958-.548l-3.296-5.15h-2.35l4.739 7.4H18.088zM6.667 5.5c-.381 0-.736.188-.958.548L2.413 11.2h2.35l4.74-7.4zm13.5-3.25z"></path></svg>
    Share on Twitter
  </a>

   <!-- LinkedIn Button -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-700 to-blue-900 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-900 dark:to-blue-950 dark:shadow-blue-950/50 dark:hover:shadow-blue-950/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 0H2v24h20V0zM8 19H5V8h3v11zM6.5 6.31C5.55 6.31 4.8 5.56 4.8 4.6S5.55 2.9 6.5 2.9s1.7 0.76 1.7 1.7S7.45 6.31 6.5 6.31zm15.5 12.69h-3v-5.6c0-1.3-.5-2.6-2-2.6-1.2 0-2 0.8-2 2v5.6h-3V8h3v1.5c0.5-0.8 1.6-1.5 3-1.5 2.5 0 4 1.6 4 5.8v6.2z"></path></svg>
    Share on LinkedIn
  </a>

  <!-- Generic Share Button (Copy Link) -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-teal-500 to-teal-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-teal-700 dark:to-teal-900 dark:shadow-teal-900/50 dark:hover:shadow-teal-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.685v-5.008l4-3.997-4-3.997v-5.008h-8v5.005l4 3.994-4 3.994v5.005h8z m-6-1.769v-5.005l-4-3.994 4-3.994v-5.005h-8v5.008l4 3.997-4 3.997v5.008h8z"></path></svg>
    Copy Link
  </a>
</div>

Boutons de partage social rétro

Composant de boutons de partage social avec un design rétro/vintage, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS, aucun JavaScript n’est nécessaire.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900" style="font-family: 'Press Start 2P', cursive;">
  <div class="flex space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-retro">
    <a href="#" class="share-button facebook">
      <img src="https://img.icons8.com/fluent/48/000000/facebook-new.png" alt="Facebook" class="w-8 h-8">
    </a>
    <a href="#" class="share-button twitter">
      <img src="https://img.icons8.com/fluent/48/000000/twitter.png" alt="Twitter" class="w-8 h-8">
    </a>
    <a href="#" class="share-button instagram">
      <img src="https://img.icons8.com/fluent/48/000000/instagram.png" alt="Instagram" class="w-8 h-8">
    </a>
    <a href="#" class="share-button pinterest">
      <img src="https://img.icons8.com/fluent/48/000000/pinterest.png" alt="Pinterest" class="w-8 h-8">
    </a>
  </div>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    .shadow-retro {
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .dark .shadow-retro {
        box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.2);
    }

    .share-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: 2px solid #000;
    }

     .dark .share-button {
        border: 2px solid #fff;
     }

    .share-button:hover {
      transform: translateY(-5px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button:hover {
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    }

    .facebook {
      background-color: #4267B2;
    }
    .twitter {
      background-color: #1DA1F2;
    }
    .instagram {
      background-color: #E1306C;
    }
    .pinterest {
      background-color: #BD081C;
    }
  </style>
</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social stylisé avec des effets de glassmorphism, prenant en charge les thèmes clairs et sombres.

Ouvrir Aperçu

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

Brutalisme Boutons de partage social

Composant de boutons de partage social avec style brutalisme, effets réactifs et prise en charge du thème sombre, pas besoin de javascript

Ouvrir Aperçu

                <div class="flex flex-wrap justify-center gap-4 p-4 bg-zinc-200 dark:bg-zinc-800">
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-red-600 border-4 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
    <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 0-.35-.012-.52A8.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.363 8.363 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.4-4.286 4.106 4.106 0 001.27 5.477A4.073 4.073 0 014 10.59v.053a4.106 4.106 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
    </svg>
  </a>
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-blue-600 border-4 border-black dark:border-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-blue-700 dark:hover:bg-blue-700">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.418 2.867 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.164-1.11-1.478-1.11-1.478-.908-.62.062-.606.062-.606 1.003-.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.681-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.022A9.61 9.61 0 0112 6.865c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.379.202 2.398.1 2.651.64.693 1.029 1.59 1.029 2.681 0 3.84-2.339 4.69-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
    </svg>
  </a>
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-cyan-500 border-4 border-black dark:border-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-cyan-600 dark:hover:bg-cyan-600">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M22.162 5.656a8.384 8.384 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.8.5-1.7.8-2.6.9a4.162 4.162 0 00-7.1 3.85A11.763 11.763 0 013.8 6.4c-.4 1-.6 2.1-.6 3.3 0 2.3 1.2 4.3 2.9 5.5a4.165 4.165 0 01-1.9-.5v.05c0 2 1.4 3.7 3.3 4.1a4.221 4.221 0 01-1.9.05c.5 1.6 2 2.8 3.7 2.9A8.368 8.368 0 0018 18.3c1.6-.9 2.9-2.6 2.9-4.5v-.5c.5-.4.9-.8 1.3-1.3z"/>
    </svg>
  </a>
</div>

Composant Boutons de partage social

Composant de boutons de partage social avec style Brutalism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-zinc-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 border-4 border-zinc-900 dark:border-zinc-100 p-4 bg-white dark:bg-zinc-800 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-500 hover:bg-blue-700 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Twitter
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-700 hover:bg-blue-900 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Facebook
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-red-600 hover:bg-red-800 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Instagram
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-" class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-900 hover:bg-blue-950 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      LinkedIn
    </button>
  </div>
</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social avec une conception 3D incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement. Il prend en charge les thèmes sombres avec CSS.

Ouvrir Aperçu

                <div class="flex justify-center space-x-4 p-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
            <i class="fab fa-facebook-f"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
            <i class="fab fa-twitter"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
            <i class="fab fa-linkedin-in"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
            <i class="fab fa-instagram"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Composant Boutons de partage social

Un composant réactif de boutons de partage social avec un style de conception skeuomorphe qui imite ses homologues du monde réel, avec la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
    <h2 class="text-lg font-bold">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
        </a>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
        <p>Connect with us!</p>
    </div>
</div>

Boutons de partage social

Composant de boutons de partage social avec design Glassmorphism, effets réactifs et prise en charge du thème sombre. Aucun JavaScript n’est utilisé.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg">
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <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 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.367 8.367 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.51A4.073 4.073 0 01.8 7.71v.057a4.1 4.1 0 003.294 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
      </svg>
    </a>
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.5v-6.533H5.933V12.017H8.83v-2.57c0-3.518 2.13-5.425 5.242-5.425 1.493 0 2.99.22 2.99.22v3.293h-1.68c-1.63.005-2.16.94-2.16 1.902v2.753h3.332l-.533 3.44H14.17V21.5c3.966-1.32 6.83-5.077 6.83-9.483C22 6.484 17.523 2 12 2z" clip-rule="evenodd"></path>
      </svg>
    </a>
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.964 0H1.036C.465 0 0 .465 0 1.036v11.928c0 .571.465 1.036 1.036 1.036h11.928c.571 0 1.036-.465 1.036-1.036V1.036C14 0 .571 0 12.964 0zM4.568 11.669H2.473V4.05H4.568v7.619zM3.52 3.012c-.775 0-1.411-.636-1.411-1.416 0-.78.636-1.416 1.411-1.416.776 0 1.411.636 1.411 1.416 0 .78-.635 1.416-1.411 1.416zM11.668 11.669H9.57v-3.48c0-.831-.015-1.898-1.158-1.898-1.16 0-1.334.904-1.334 1.84v3.538H5.091V4.05h2.008v.92h.028c.277-.529.959-1.083 1.984-1.083 2.121 0 2.518 1.392 2.518 3.191v7.68z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
</div>

Composant Boutons de partage social

Un composant minimaliste de boutons de partage social conçu avec Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
        <span>Facebook</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
        <span>Twitter</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
        <span>LinkedIn</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
        <span>WhatsApp</span>
    </a>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        background-color: #2d3748;
    }
    .dark\:text-white {
        color: #fff;
    }
    .dark\:hover\:bg-gray-700 {
        background-color: #4a5568;
    }
}
</style>