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

Componente Pulsanti di condivisione social

Un componente minimalista dei pulsanti di condivisione social progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri.

Aperto

Componente Pulsanti di condivisione social

Un componente semplice e reattivo per i pulsanti di condivisione social con un'estetica ispirata al design Memphis che utilizza colori neutri freddi, adatto per strumenti CRM/aziendali. Include il supporto per la modalità oscura.

Aperto

Componente Pulsanti di condivisione social

Un componente reattivo dei pulsanti di condivisione social con uno stile di progettazione scheumorfico che imita le controparti del mondo reale, con supporto per temi scuri.

Aperto