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.
Codice HTML
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
<div class="grid grid-cols-2 gap-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
👍 Like
</button>
<button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
❤️ Love
</button>
<button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
😂 Haha
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
😮 Wow
</button>
</div>
<div class="flex space-x-4">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>
Componenti correlati
Componente Pulsanti Mi piace/Reazione
Un componente reattivo per i pulsanti Mi piace/Reazione progettato pensando alle microinterazioni, utilizzando una combinazione di colori monocromatica, adatto per il consumo di blog e contenuti, con supporto per temi scuri.
Pulsanti analoghi in modalità scura Mi piace/Reazione
Un componente Pulsanti Mi piace/Reazione complesso e reattivo per un portfolio, con un'interfaccia utente in modalità scura e una combinazione di colori analoga, implementato utilizzando HTML puro e Tailwind CSS. Supporta la modalità oscura tramite il prefisso dark: di Tailwind.