Composant Boutons de partage social
Un composant simple et réactif de boutons de partage social avec une esthétique inspirée du design de Memphis utilisant des couleurs neutres et froides, adapté aux outils CRM/professionnels. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-900 font-sans min-h-screen flex items-center justify-center">
<div class="max-w-md w-full p-4 sm:p-6 md:p-8 rounded-lg shadow-lg relative overflow-hidden
bg-gradient-to-br from-gray-100 to-white dark:from-gray-800 dark:to-gray-950
border border-gray-200 dark:border-gray-700">
<!-- Memphis Design Elements (Geometric shapes) -->
<div class="absolute -top-8 -left-8 w-24 h-24 bg-blue-200 dark:bg-blue-800 transform rotate-45 rounded-lg opacity-70"></div>
<div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gray-300 dark:bg-gray-700 transform skew-x-12 opacity-60"></div>
<div class="absolute top-1/4 left-1/4 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full opacity-50"></div>
<h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-6 relative z-10 text-center">
Share This Content
</h3>
<div class="flex flex-wrap gap-3 sm:gap-4 justify-center relative z-10">
<a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300
shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
aria-label="Share on Facebook">
<svg class="w-6 h-6 sm:w-7 sm: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.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-all duration-300
shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-75"
aria-label="Share on Twitter">
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-1.04-.614-2.185-1.002-3.425-1.229a4.958 4.958 0 00-8.467 4.549 14.025 14.025 0 01-10.139-5.127 4.958 4.958 0 001.523 6.696c-.965-.034-1.871-.295-2.673-.737v.063a4.958 4.958 0 003.945 4.862 4.995 4.995 0 01-2.22-.088 4.93 4.93 0 004.604 3.447 9.956 9.956 0 01-6.102 2.105c-.39-.023-.777-.048-1.164-.079A13.95 13.95 0 0014 20.443c6.367 0 9.33-5.227 9.33-9.743 0-.15-.003-.298-.009-.446A16.974 16.974 0 0024 4.57z">
</path>
</svg>
</a>
<a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-all duration-300
shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
aria-label="Share on Pinterest">
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10c5.236 0 9.53-4.043 9.933-9.183.042-.5-.192-.937-.64-.997s-.887.182-1.383.568c-1.082.827-2.347 1.488-3.79 1.488-2.617 0-4.733-2.115-4.733-4.73C7.437 6.478 9.92 4 12 4c2.204 0 3.993 1.637 4.542 3.82.046.192.203.255.45.187.247-.068.397-.245.474-.473.55-1.633.374-3.568-1.002-4.998C15.42 2.628 13.785 2 12 2ZM8.736 10.963c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.895 4.07c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm5.626-2.222c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.787 4.148c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-2.738-2.58c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-gray-700 hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-600 transition-all duration-300
shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75"
aria-label="Share via Email">
<svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M1.5 8.67a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 8.67v7.66A2.25 2.25 0 0120.25 18.5H3.75A2.25 2.25 0 011.5 16.33v-7.66zM1.5 9.75v-.88A2.25 2.25 0 013.75 6H20.25A2.25 2.25 0 0122.5 8.87v.88H1.5z" />
<path d="M22.5 9.75c0-.44-.36-.75-.75-.75H2.25c-.39 0-.75.31-.75.75v.75l10.5 5.5s10.5-5.5 10.5-5.5V9.75z" />
</svg>
</a>
</div>
</div>
</div>Composants associés
Skeuomorphic Boutons de partage social
Composant de boutons de partage social réactif avec un design skeuomorphe, une palette de couleurs monochromatique et des interactions complexes, avec prise en charge du thème sombre. Conçu pour les blogs et les sites de contenu.
Composant Boutons de partage social
Un composant minimaliste de boutons de partage social conçu avec Tailwind CSS, avec une mise en page réactive et une prise en charge du thème sombre. Le composant comprend des boutons de partage sur les plateformes de médias sociaux populaires avec des éléments de conception simples et épurés.
Composant Boutons de partage social
Composant de boutons de partage social pour l’interface utilisateur en mode sombre, utilise Tailwind CSS, schéma de couleurs en niveaux de gris, complexité simple, à des fins de portefeuille, conception réactive avec prise en charge du thème sombre.