Komponente "Gefällt mir/Reaktions-Buttons"
Eine reaktionsschnelle Like/Reaction Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es verfügt über ein komplementäres Farbschema, das für ein Dashboard geeignet ist, mit moderater Komplexität für interaktive Reaktionsschaltflächen.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gray-900">
<div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
<div class="flex space-x-2">
<!-- Like Button -->
<button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
<span>Like</span>
<span class="dark:text-blue-200">1.2K</span>
</button>
<!-- Reactions Dropdown (simplified) -->
<div class="relative group">
<button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>React</span>
</button>
<!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
<div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
</div>
</div>
</div>
</div>
</div>
Verwandte Komponenten
Komponente "Gefällt mir/Reaktions-Buttons"
Eine Webkomponente mit Like- und Reaction-Schaltflächen mit Mikrointeraktionen und Unterstützung für dunkle Designs mit Tailwind CSS.
Komponente "Gefällt mir/Reaktions-Buttons"
Eine komplexe Webkomponente mit Glasmorphismus mit durchscheinenden Elementen und Unschärfeeffekten. Es enthält mehrere interaktive Elemente, die für Unternehmenswebsites entwickelt wurden und den Dunkelmodus unterstützen.