Komponente "Social-Share-Buttons"
Social-Share-Buttons-Komponente für E-Commerce im Dark Mode mit Tailwind CSS. Einfach, reaktionsschnell und in Graustufen.
HTML-Code
<div class="flex justify-center items-center space-x-4 bg-gray-900 p-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.79 9.362 8.75 10.346V14.25H6.404V11.89h2.346V9.13c0-2.323 1.4-3.582 3.47-3.582 1.004 0 1.865.076 2.12.11v2.58h-1.53c-1.228 0-1.47.595-1.47 1.467v1.911h2.8L14.2 14.25h-2.8v7.196C18.21 21.362 22 17.083 22 12 22 5.373 17.627 0 12 0z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724c-1.036.617-2.19 1.064-3.427 1.31a4.918 4.918 0 00-8.384 4.482A13.952 13.952 0 011.67 3.148a4.929 4.929 0 001.523 6.574 4.89 4.89 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.99C8.072 14.912 7.6 14.976 7.11 14.992a4.943 4.943 0 004.6 3.438 9.857 9.857 0 01-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.995 13.995 0 007.55 2.209c9.053 0 13.999-7.496 13.999-13.986 0-.19.004-.379.014-.568A10.035 10.035 0 0024 4.557z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.664 3.703a5.003 5.003 0 00-3.742-2.918c-2.462-.511-4.9-.171-7.127.734-2.495 1.01-4.46 3.098-5.44 5.623C3.43 9.55 3.2 12.268 4 15c.758 2.61 2.517 5.08 5.042 6.106 2.567 1.034 5.82.36 8.11-1.87C19.74 17.775 21.277 15.125 21.6 12.25c.325-2.876-.316-5.69-1.136-8.547zM15.636 15.895a2.837 2.837 0 01-4.159-.129L9.613 13.8l-2.783.67c-.77.185-1.5-.575-1.313-1.354l.67-2.786-1.95-2.05a.964.964 0 01.257-1.35c.3-.273.73-.466 1.2-.53l2.783-.67 1.136-2.61.024-.05c.247-.581.975-.817 1.53-.576a.967.967 0 01.595.89l.67 2.783 2.783-.67c.77-.185 1.5.575 1.313 1.354l-.67 2.786 1.95 2.05a.964.964 0 01-.257 1.35c-.3.273-.73.466-1.2.53l-2.783.67-1.136 2.61-.024.05a.965.965 0 01-.93.682z"/>
</svg>
</a>
</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.
Komponente "Social-Share-Buttons"
Eine reaktionsschnelle Komponente für Social-Share-Buttons mit einem 3D-Design mit dreidimensionalen Elementen für Tiefe und Engagement. Es unterstützt dunkle Themen mit CSS.
Social-Share-Schaltflächen
Responsive Social-Share-Buttons-Komponente mit Unterstützung für dunkle Themen, brutalistischem Design, analogem Farbschema und komplexen Interaktionen, erstellt mit Tailwind CSS für eine Portfolio-Website.