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.
HTML Code
<div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
<div class="flex items-center space-x-2">
<img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
<span class="text-gray-800 dark:text-gray-200">Share with:</span>
</div>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
</a>
</div>Composants associés
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.
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.
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