Komponenten Social-Share-Schaltflächen Komponente "Social-Share-Buttons"

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.

Vorschau

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.

Offen

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.

Offen

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.

Offen