Componenti Pulsanti di condivisione social Componente Pulsanti di condivisione social

Componente Pulsanti di condivisione social

Un componente minimalista per i pulsanti di condivisione social progettato con Tailwind CSS, con layout reattivo e supporto per temi scuri. Il componente include pulsanti per la condivisione su piattaforme di social media popolari con elementi di design puliti e semplici.

Anteprima

Codice HTML

<div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
        <span class="text-gray-800 dark:text-gray-200">Share with:</span>
    </div>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
    </a>
</div>

Componenti correlati

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.

Aperto