Komponente "Social-Share-Buttons"
Eine reaktionsschnelle Social-Share-Buttons-Komponente im Retro-/Vintage-Design und Pastell-Farbschema, die den Dunkelmodus unterstützt und für Social-Media-Schnittstellen geeignet ist.
HTML-Code
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
</div>
<div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
</div>
<div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
</div>
<div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
</div>
<div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
</div>
<div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
</div>
</div>
</div>Verwandte Komponenten
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.
Social-Share-Schaltflächen
Social-Share-Buttons mit responsivem Design, Unterstützung für dunkle Themen und 3D-Ästhetik. Kein JavaScript erforderlich.
Komponente "Social-Share-Buttons"
Social-Share-Buttons-Komponente mit Brutalismus-Design, lebendigem Farbschema und komplexer Komplexität für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript.