Pulsanti di condivisione social
Componente reattivo dei pulsanti di condivisione social con supporto per temi scuri, design brutalista, combinazione di colori analoga e interazioni complesse, costruito con Tailwind CSS per un sito Web di portfolio.
Codice HTML
<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>Componenti correlati
Componente Pulsanti di condivisione social
Un componente scheumorfico dei pulsanti di condivisione social progettato per i siti Web di e-commerce, con una combinazione di colori in scala di grigi e supporto per la modalità scura.
Componente Pulsanti di condivisione social
Un componente reattivo del pulsante di condivisione social per siti Web di cibo/ristoranti, con una sfumatura arcobaleno, microinterazioni al passaggio del mouse e supporto completo della modalità scura.
Componente Pulsanti di condivisione social
Un componente reattivo dei pulsanti di condivisione social progettato in uno stile glassmorphism con una combinazione di colori monocromatica per i siti di e-commerce. È dotato di elementi traslucidi simili al vetro smerigliato, include più pulsanti interattivi per la condivisione sui social media e supporta la modalità oscura utilizzando Tailwind CSS.