Componente Pulsanti Mi piace/Reazione
Un componente Pulsanti Mi piace/Reazione in stile retrò/vintage, dotato di una gamma di pulsanti interattivi per le reazioni con supporto per temi scuri e design reattivo. Questo componente è adatto per una dashboard, consentendo agli utenti di reagire a vari elementi dell'interfaccia.
Codice HTML
<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>Componenti correlati
Componente dei pulsanti di simpatia/reazione skeuomorfa
Un componente di pulsanti di simpatia/reazione scheumorfiche complesso, reattivo e a tema scuro che utilizza una combinazione di colori monocromatici per l'e-commerce.
Componente Pulsanti Mi piace/Reazione
Un componente dei pulsanti Mi piace/Reazione in stile neumorfismo per blog con un design complesso e supporto per la modalità scura.
Componente Pulsanti Mi piace/Reazione
Un componente Pulsanti Mi piace/Reazione progettato in stile Brutalismo con Tailwind CSS, con effetti reattivi e supporto per temi scuri.