Componenti Pulsanti di condivisione social Componente Pulsanti di condivisione social

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.

Anteprima

Codice HTML

<div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
        <span>Facebook</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
        <span>Twitter</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
        <span>LinkedIn</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
        <span>WhatsApp</span>
    </a>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        background-color: #2d3748;
    }
    .dark\:text-white {
        color: #fff;
    }
    .dark\:hover\:bg-gray-700 {
        background-color: #4a5568;
    }
}
</style>

Componenti correlati

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

Pulsanti di condivisione social skeuomorfi

Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza Tailwind CSS. Presenta sfumature, ombre ed effetti hover/attivi per simulare i pulsanti fisici. Il componente è reattivo e include il supporto della modalità oscura tramite CSS. Contiene pulsanti per Facebook, Twitter, LinkedIn e un pulsante generico di copia del link.

Aperto

Componente Pulsanti di condivisione social

Componente Social Share Buttons con design retrò / vintage, combinazione di colori dei toni della terra, livello di complessità semplice e design reattivo con supporto per temi scuri, per scopi di social media utilizzando Tailwind CSS.

Aperto