Componente Pulsanti di condivisione social
Un componente reattivo dei pulsanti di condivisione social con effetti di vetromorfismo, che supporta temi chiari e scuri.
Codice HTML
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
</a>
<a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
</a>
<a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
</a>
<a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1F2937;
}
}
</style>
Componenti correlati
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.
Pulsanti di condivisione social
Componente reattivo dei pulsanti di condivisione social con supporto per temi scuri, design brutalista, combinazione di colori analoga e interazioni complesse, costruito con Tailwind CSS per un sito Web di portfolio.
Pulsanti di condivisione social del tono della terra scheumorfo
Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza i toni della terra. Le caratteristiche includono il layout reattivo e il supporto della modalità oscura con effetti di stampa interattivi al passaggio del mouse, costruiti esclusivamente con le classi HTML e Tailwind CSS.