Componenti Pulsanti di condivisione social Componente Pulsanti di condivisione social

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.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</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 progettato con uno stile scheumorfico in scala di grigi per il consumo di contenuti di blog. Include il supporto per la modalità oscura.

Aperto

Componente Pulsanti di condivisione social

Componente pulsanti di condivisione social per l'interfaccia utente in modalità scura, utilizza Tailwind CSS, combinazione di colori in scala di grigi, complessità semplice, per scopi di portfolio, design reattivo con supporto per tema scuro.

Aperto