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

Komponente "Social-Share-Buttons"

Eine Reihe von Social-Media-Share-Buttons, die mit einer Monospace-/Entwickler-Ästhetik, einem blauen Farbschema und voller Reaktionsfähigkeit gestaltet sind. Enthält Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

<div class="font-['Menlo',_monospace] bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-2xl mx-auto rounded-lg shadow-xl overflow-hidden border border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-800">
    <div class="p-6 border-b border-blue-100 dark:border-blue-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2 leading-tight">
        <span class="text-blue-600 dark:text-blue-400">//</span> Share this article
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Spread the word about our latest insights and news.</p>
    </div>
    <div class="p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.29 20.44c-1.39 0-2.5-1.12-2.5-2.5s1.11-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.11 2.5-2.5 2.5zm11.71-8.56c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-4.75-.41c-2.32 0-4.22 1.84-4.25 4.16.89-.96 2.11-1.5 3.39-1.5 1.28 0 2.5.54 3.39 1.51-.03-2.32-1.93-4.17-4.25-4.17zm1.75-6c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zm-9.5 0c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zM12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12a10.001 10.001 0 008.883 9.957v-7.042h-2.35V12h2.35V9.42c0-2.324 1.416-3.593 3.49-3.593 1.002 0 1.868.075 2.12.108v2.441l-1.448.001c-1.132 0-1.353.538-1.353 1.326V12h2.7v2.915h-2.7V22C17.523 22 22 17.523 22 12S17.523 2 12 2z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          <path fill-rule="evenodd" d="M9.208 2.047a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zm5.5-16.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zM12 4a8 8 0 100 16 8 8 0 000-16zM3 12a9 9 0 119 9A9.004 9.004 0 013 12zm2 0a7 7 0 1014 0 7 7 0 00-14 0zm10.5-5.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm5.5 11a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Instagram</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.564-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 3.5c-4.99 0-9.04 4.05-9.04 9.04 0 4.98 4.05 9.04 9.04 9.04 4.98 0 9.04-4.06 9.04-9.04C21.08 7.55 17.03 3.5 12.04 3.5zM15.42 16.5c-.32.06-.5-.17-.6-.24l-2.07-1.42c-.22-.15-.43-.3-.43-.65V8.5h.01c.28 0 .42-.14.42-.42 0-.29-.14-.42-.42-.42-.29 0-.42.14-.42.42v5.77c0 .12.04.23.08.31.05.07.13.1.28.21.14.09.28.18.42.26l2.1 1.44c.48.33.67.55.51.9-.19.4-.55.52-.92.42zm-3.38-2.61c.42-.29.54-.78.29-1.2l-2.82-4.9c-.29-.5-.88-.65-1.39-.36-.5.29-.65.88-.36 1.39l2.82 4.9c.29.5.88.65 1.39.36z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19.9 22.4L20 22.5c.3.3.4.7.4 1.1s-.1.8-.4 1.1L20 25c-.2.2-.4.4-.7.4s-.5.0-.7-.1c0 0-.1-.1-.1-.1-.1-.1-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2s-.1-.2-.1-.3c-.1-.1-.1-.2-.1-.3s-.1-.2-.1-.3c0-.1-.1-.2-.1-.2s0-.2-.1-.3c0 0-.1.0-.1.0-.1 0-.1.0-.1-.1-.1-.1-.1-.1 0-.1s.1-.1.2-.1c0-.1.1-.1.2-.1.1-.1.1-.1.2-.1s.1-.1.2-.1h.2c0 0-.1 0-.1.1-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1-.1-.1-.2-.2-.2-.1-.1-.1-.1-.2-.1h-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.2-.1s.1-.1.2-.1c.1 0 .1-.1.2-.1h.2c.1-.1.2-.1.3-.1.1-.1.1-.1.2-.1h.2c.1 0 .1-.1.2-.1.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.1 0h-.1c0 0-.1.0-.1.0-.1.0-.1.0-.1.0-.1.1-.1.1-.1.1-.1.0-.1.0-.2.0-.1.1-.1.1-.2.1-.1.0-.1.0-.1.1-.1.0-.1.0-.1.1c-.1.0-.1.0-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.0.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-1.2-1.2h-11.8v-20.1h15v11.8c.0.0.1.1.1.1.1.1.2.2.2.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.1.2.1.2.1.1.1.2.1.2.1 0 .2.0.2.1.1.0.1.0.2.1.1 0 .1.0.2.0.1.0.1.0.2.0.2-.1.1.0.1.0.2-.1.0-.1.0-.2.0-.1-.1-.1.0-.2-.1-.1-.0-.1-.1-.2-.1-.0-.1-.1-.2-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1h-.1c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2h-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2L0 12l2.3-2.3C2.1 9.5 2.1 9.4 2.1 9.4c.1-.1.1-.1.1-.1.1-.1.1-.1.1-.2.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1l-.1-.1h-5.2v2.3h5.1l-.1.1c.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.2.2.3.3.4.1.1.2.2.4.3.1.1.3.2.4.2.1.1.3.2.4.2.1 0 .2.0.3.1.1.0.2.0.3.1.1.0.2.0.3.1.1.0.2.0.2.0.1.0.1-.1.1-.1.1-.0.1-.1.1-.1 0-.1.0-.1.0-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1zM11.6 4.3L12 4.7l-7.7 7.7L4 12V2.5c0-.6.5-1.1 1.1-1.1h5.8c.6 0 1.1.5 1.1 1.1v.8l-.4.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.3-.1.4s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 0 0 .1-.1.1zM22.5 1.1H16.7L19 3.4l-.1.1c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.0-.1.1-.1.1s-.1.1-.1.1l-.1.1h-2.3c-.6 0-1.1.5-1.1 1.1v5.8c0 .6.5 1.1 1.1 1.1h10.9c.6 0 1.1-.5 1.1-1.1V2.5c.0-.6-.5-1.1-1.1-1.1z" transform="translate(0 -1)"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.336 8.797c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C17.969 5.097 17.59 5 17.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM16.89 12.015c-1.396 0-2.529.479-3.414 1.436-.886.957-1.329 2.15-1.329 3.58 0 1.43.443 2.625 1.329 3.581.885.956 2.018 1.434 3.414 1.434 1.39 0 2.518-.479 3.385-1.432.868-.953 1.302-2.147 1.302-3.583 0-1.423-.434-2.618-1.302-3.588-.867-.97-1.995-1.45-3.385-1.45zm0-.5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-16.89 5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-.5-5c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C5.969 5.097 5.59 5 5.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM5.16 3.5c-.328 0-.62.062-.876.185-.257.124-.469.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zm11.734 0c-.328 0-.62.062-.876.185-.257.124-.47.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zM12 9.015c-.78 0-1.49.208-2.13.626-.63.417-1.11 1.01-1.44 1.776-.33.766-.495 1.579-.495 2.433 0 .848.165 1.66.495 2.43.33.77.81 1.36 1.44 1.78.64.417 1.35.625 2.13.625.78 0 1.49-.208 2.13-.625.63-.418 1.11-1.01 1.44-1.78.33-.77.495-1.57.495-2.43 0-.854-.165-1.667-.495-2.433-.33-.766-.81-1.359-1.44-1.776-.64-.418-1.35-.626-2.13-.626z"/>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
      </a>
    </div>
    <div class="p-6 border-t border-blue-100 dark:border-blue-700 text-sm text-gray-500 dark:text-gray-400">
      <p>Tip: Click to share. More options coming soon.</p>
      <p class="mt-2 text-blue-500 dark:text-blue-400"><span class="text-blue-600 dark:text-blue-500">guest@website</span>:$ <span class="animate-pulse">_</span></p>
    </div>
  </div>
</div>

Verwandte Komponenten

Social-Share-Buttons Komponente 51

Eine reaktionsschnelle Social-Share-Buttons-Komponente, die nach skeuomorphen Designprinzipien entwickelt wurde, mit Schaltflächen, die reale Objekte nachahmen, und Unterstützung für dunkle Themen. Die Komponente wird mit Tailwind CSS formatiert und enthält Platzhalterbilder aus picsum.photos und Avatare aus randomuser.me.

Offen

Komponente "Social-Share-Buttons"

Eine minimalistische Social-Share-Buttons-Komponente, die mit Tailwind CSS entwickelt wurde und ein responsives Layout und Unterstützung für dunkle Themen bietet. Die Komponente enthält Schaltflächen zum Teilen auf beliebten Social-Media-Plattformen mit klaren und einfachen Designelementen.

Offen

Social-Share-Buttons-Komponente - Musik/Audio

Eine Reihe von Social-Share-Buttons, die für Musik- und Audioplattformen entwickelt wurden und sich durch eine Material-Design-Ästhetik mit gedämpften Farben und Unterstützung des Dunkelmodus auszeichnen. Enthält Schaltflächen für gängige Sharing-Plattformen wie Facebook, Twitter und E-Mail.

Offen