Komponente "Gefällt mir/Reaktions-Buttons"
Eine Komponente für Like/Reaction-Schaltflächen im Retro-/Vintage-Stil mit einer Reihe interaktiver Schaltflächen für Reaktionen mit Unterstützung für dunkle Themen und responsivem Design. Diese Komponente eignet sich für ein Dashboard, das es Benutzern ermöglicht, auf verschiedene Elemente in der Benutzeroberfläche zu reagieren.
HTML-Code
<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
<div class="flex justify-around mb-4">
<button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
<button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
<button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
</div>
<hr class="border-gray-600 mb-4">
<div class="flex items-center justify-center">
<img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-lg text-gray-300">John Doe</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">React to the content with your feelings!</p>
</div>
</div>
<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
<h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
<div class="grid grid-cols-2 gap-4">
<button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
<button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
<button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
</div>
</div>Verwandte Komponenten
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.
Skeuomorphe Reaktionsknöpfe
Eine Reihe von "Gefällt mir"- und Reaktionsschaltflächen mit einem Skeuomorphen Designstil, der responsive Layouts und den Dunkelmodus unterstützt. Die Buttons sind rein mit HTML und Tailwind CSS umgesetzt, ohne JavaScript. Der Dunkelmodus wird über CSS-Klassen behandelt. Platzhalterbilder werden für Avatare verwendet.