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
Skeuomorphic Earth Tone Boutons de partage social
Un ensemble de boutons de partage social stylisés dans un design Skeuomorphic utilisant des tons de terre. Les fonctionnalités incluent une mise en page réactive et la prise en charge du mode sombre avec des effets de presse interactifs au survol, construits uniquement avec des classes HTML et Tailwind CSS.
Composant Boutons de partage social
Un composant réactif de boutons de partage social conçu dans un style glassmorphism avec une palette de couleurs monochromatiques pour les sites de commerce électronique. Il comporte des éléments translucides givrés ressemblant à du verre, comprend plusieurs boutons interactifs pour le partage sur les réseaux sociaux et prend en charge le mode sombre à l’aide de Tailwind CSS.
Composant Boutons de partage social
Composant de boutons de partage social avec un design rétro/vintage, une palette de couleurs de tons de terre, un niveau de complexité simple et un design réactif avec prise en charge du thème sombre, à des fins de médias sociaux à l’aide de Tailwind CSS.