Komponente "Social-Share-Buttons"
Eine reaktionsschnelle Komponente für Social-Share-Buttons, die mit Retro-/Vintage-Ästhetik aus den 80er/90er Jahren gestaltet ist und Unterstützung für dunkle Themen mit Tailwind CSS und Platzhalterbildern bietet.
HTML-Code
<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
<h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Facebook</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Twitter</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Instagram</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
</a>
</div>
<div class="mt-5">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
</div>
</div>
Verwandte Komponenten
Komponente "Social-Share-Buttons"
Vom Bauhaus inspirierte Social-Share-Buttons für Sport-/Fitnessanwendungen mit geometrischen Formen und Blautönen. Reaktionsschnell mit Unterstützung für den Dunkelmodus.
Retro-Schaltflächen zum Teilen in sozialen Netzwerken
Social-Share-Buttons-Komponente mit Retro-/Vintage-Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS, kein JavaScript erforderlich.
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.