Componenti Pulsanti di condivisione social Componente Pulsanti di condivisione social

Componente Pulsanti di condivisione social

Un componente reattivo dei pulsanti di condivisione social progettato con uno stile scheumorfico in scala di grigi per il consumo di contenuti di blog. Include il supporto per la modalità oscura.

Anteprima

Codice HTML

<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
    <div class="flex space-x-4 mb-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>

Componenti correlati

Brutalismo Social Share Pulsanti

Componente Social Share Buttons con stile Brutalism, effetti reattivi e supporto per temi scuri, non è necessario javascript

Aperto

Componente Pulsanti di condivisione social

Un componente reattivo dei pulsanti di condivisione social con un'estetica retrò/vintage degli anni '80/'90, con supporto per temi scuri utilizzando Tailwind CSS e immagini segnaposto.

Aperto

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.

Aperto