Boutons de partage social
Composant de boutons de partage social réactif avec prise en charge du thème sombre, design brutaliste, schéma de couleurs analogue et interactions complexes, construit avec Tailwind CSS pour un site Web de portfolio.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Social Share Button 1 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-yellow-500 text-3xl">
<i class="fab fa-twitter"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
</div>
</div>
<button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Tweet
</button>
</div>
<!-- Social Share Button 2 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-orange-500 text-3xl">
<i class="fab fa-facebook-f"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
</div>
</div>
<button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Share
</button>
</div>
<!-- Social Share Button 3 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-red-500 text-3xl">
<i class="fab fa-pinterest-p"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
<p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
</div>
</div>
<button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Pin It
</button>
</div>
<!-- Social Share Button 4 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-blue-500 text-3xl">
<i class="fab fa-linkedin-in"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
<p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
</div>
</div>
<button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Connect
</button>
</div>
</div>
</div>Composants associés
Composant Boutons de partage social
Un composant élégant et réactif de boutons de partage social conçu pour les sites d’actualités et de journalisme, doté d’une luxueuse palette de couleurs forêt/vert et d’une prise en charge du mode sombre. Il comprend plusieurs éléments interactifs pour partager des articles sur diverses plateformes.
Composant Boutons de partage social
Un composant réactif de boutons de partage social stylisé avec une esthétique rétro/vintage des années 80/90, avec la prise en charge du thème sombre à l’aide de Tailwind CSS et d’images de remplacement.
Composant Boutons de partage social
Un composant minimaliste de boutons de partage social conçu pour les tableaux de bord, avec une palette de couleurs vives et un design réactif, avec prise en charge du mode sombre.