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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black">
<div class="flex space-x-4 p-4 bg-gray-800 dark:bg-gray-900 rounded-lg">
<a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.475 2 2 6.475 2 12c0 4.215 2.582 7.775 6.32 9.34.46.085.59-.2.59-.44v-1.54c-2.53.55-3.06-.83-3.06-.83-.4-.99-.98-1.26-.98-1.26-.78-.53.06-.52.06-.52.86.06 1.32.88 1.32.88.76 1.3 1.99.92 2.48.7.08-.54.3-.92.55-1.13-1.9-.21-3.91-.95-3.91-4.21 0-.93.33-1.68.88-2.27-.09-.21-.38-1.07.08-2.22 0 0 .7-.22 2.2.83.66-.18 1.36-.27 2.07-.27.71 0 1.41.09 2.07.27 1.5-1.05 2.2-.83 2.2-.83.46 1.15.17 2.01.08 2.22.55.59.88 1.34.88 2.27 0 3.27-2.01 3.99-3.92 4.2.3.26.58.76.58 1.52v2.24c0 .24.13.52.59.44C19.42 19.775 22 16.215 22 12 22 6.475 17.525 2 12 2z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.5c-1.7.37-3.34.33-4.76-.25C.9 19.24 1.97 16.26 3.56 15c.71-.54 1.46-1.03 2.26-1.46 1.05-.56 2.08-1.12 3.1-.68 1.02.44 1.47 1.56 1.47 2.64 0 .4-.02.8-.06 1.19.73-.13 1.46-.25 2.18-.38.8-.08 1.6.01 2.4.27 1.57.52 2.73 1.74 3.27 3.3.4-.13.79-.26 1.19-.39 1.-.32 2.1-.21 3 .08-.76.41-1.5.84-2.24 1.26.83 1.1 1.34 2.23 1.5 3.47.02.2.04.39.06.59-.79-.4-1.6-.79-2.4-1.19-1.2-.66-2.4-.98-3.6-.99h-.02c-.88.01-1.76.05-2.64.12-.62.05-1.2.13-1.77.25zM6.53 10.15c-2.24-.37-3.98-2.34-3.98-4.8 0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.46-1.74 4.43-3.98 4.8.01.66.08 1.33.19 1.99.39.26.8.47 1.2.68.6-.1 1.2-.2 1.81-.36-.41-1.32-1.13-2.44-2.09-3.3-.63-.57-1.31-1.06-2.02-1.48a5.65 5.65 0 00-.95-1.82 3.09 3.09 0 01-1.63-2.78c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1c0 .76-.27 1.46-.74 2.03-.43.52-.96.96-1.57 1.33 1.29 1.24 2.08 2.99 2.08 4.9 0 .51-.03 1.02-.1 1.53-1.68-.3-3.4-.4-5.12-.33-.72-1.76-.94-3.84-.51-5.79z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2c-5.523 0-10 4.477-10 10 0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-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.33v6.988C18.342 21.128 22 16.991 22 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>Composants associés
Composant Boutons de partage social
Un composant de bouton de partage social ludique et amusant conçu pour les sites Web de jeux, avec une palette de couleurs arc-en-ciel dégradée, des éléments arrondis et des effets de survol interactifs. Entièrement réactif avec prise en charge du mode sombre.
Composant Boutons de partage social
Un composant réactif des boutons de partage social stylisé avec un design rétro/vintage et une palette de couleurs pastel, prenant en charge le mode sombre et adapté aux interfaces de médias sociaux.
Composant Boutons de partage social
Boutons de partage social réactifs avec le style Glassmorphism et des couleurs vives, conçus pour les blogs et la consommation de contenu.