Componenti Pulsanti di condivisione social Pulsanti di condivisione social Componente 51

Pulsanti di condivisione social Componente 51

Un componente reattivo dei pulsanti di condivisione social progettato con principi di progettazione scheumorfici, con pulsanti che imitano gli oggetti del mondo reale e supporto per il tema scuro. Il componente è formattato utilizzando Tailwind CSS e include immagini segnaposto da picsum.photos e avatar da randomuser.me.

Anteprima

Codice HTML

<div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>

Componenti correlati

Componente Pulsanti di condivisione social

Un componente di pulsanti di condivisione social retrò/vintage con una combinazione di colori monocromatica. Si tratta di un design complesso e reattivo con supporto per temi scuri, adatto per un portfolio. Utilizza Tailwind CSS senza JavaScript.

Aperto

Componente Pulsanti di condivisione social - Musica/Audio

Una serie di pulsanti di condivisione social progettati per piattaforme musicali e audio, caratterizzati da un'estetica Material Design con colori tenui e supporto della modalità oscura. Include pulsanti per piattaforme di condivisione comuni come Facebook, Twitter ed e-mail.

Aperto

Componente Pulsanti di condivisione social

Componente Social Share Buttons per l'e-commerce in modalità scura utilizzando Tailwind CSS. Semplice, reattivo e in scala di grigi.

Aperto