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 skeuomorphic social share buttons conçu pour les sites Web de commerce électronique, doté d’une palette de couleurs en niveaux de gris et d’une prise en charge du mode sombre.
Composant Boutons de partage social
Composant de boutons de partage social pour le commerce électronique en mode sombre à l’aide de Tailwind CSS. Simple, réactif et en niveaux de gris.
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.