Komponente "Social-Share-Buttons"
Eine minimalistische Social-Share-Buttons-Komponente, die für Dashboards entwickelt wurde, mit einem lebendigen Farbschema und responsivem Design sowie Unterstützung für den Dunkelmodus.
HTML-Code
<div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
<div class="flex space-x-2">
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
<img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
<img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
<img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
<img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
</a>
</div>
</div>
Verwandte Komponenten
Skeuomorphe Social-Share-Buttons
Eine Reihe von Social-Share-Buttons, die mit einem Skeuomorphic-Design unter Verwendung von Tailwind CSS gestaltet sind. Verfügt über Farbverläufe, Schatten und Hover-/Aktiv-Effekte, um physische Tasten zu simulieren. Die Komponente ist reaktionsschnell und enthält Unterstützung für den Dunkelmodus über CSS. Enthält Schaltflächen für Facebook, Twitter, LinkedIn und eine generische Schaltfläche zum Kopieren von Links.
Skeuomorphe Erdtöne Social-Share-Buttons
Eine Reihe von Social-Share-Buttons, die in einem Skeuomorphen Design mit Erdtönen gestaltet sind. Zu den Funktionen gehören responsives Layout und Unterstützung des Dunkelmodus mit interaktiven Presseeffekten beim Hover, die ausschließlich mit HTML- und Tailwind-CSS-Klassen erstellt wurden.
Komponente "Social-Share-Buttons"
Eine reaktionsschnelle Social-Share-Buttons-Komponente, die mit einem skeuomorphen Stil in Graustufen für den Konsum von Blog-Inhalten entwickelt wurde. Enthält Unterstützung für den Dunkelmodus.