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
Componente Social Share Buttons con stile Brutalism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente Pulsanti di condivisione social
Un componente del pulsante di condivisione social giocoso e divertente progettato per i siti Web di giochi, con una combinazione di colori arcobaleno sfumato, elementi arrotondati ed effetti di passaggio del mouse interattivi. Completamente reattivo con supporto per la modalità oscura.
Pulsanti di condivisione social skeuomorfi
Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza Tailwind CSS. Presenta sfumature, ombre ed effetti hover/attivi per simulare i pulsanti fisici. Il componente è reattivo e include il supporto della modalità oscura tramite CSS. Contiene pulsanti per Facebook, Twitter, LinkedIn e un pulsante generico di copia del link.