Componente del sistema di classificazione
Un componente del sistema di valutazione reattivo progettato in stile Brutalismo utilizzando Tailwind CSS. Supporta il tema scuro e ha un contrasto elevato con un design grezzo e audace.
Codice HTML
<div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
<div class="flex items-center justify-center mb-4">
<img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
<span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
</div>
<div class="flex justify-center">
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
</div>
<div class="mt-4">
<button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark:hover\:bg-yellow-500:hover {
background-color: #bb8d29;
}
}
</style>Componenti correlati
Componente del sistema di classificazione della foresta a spaziatura singola
Un componente del sistema di rating pulito e ispirato al codice con una tavolozza verde bosco, adatto per i portfolio. Dispone di stelle interattive per la valutazione e visualizza le valutazioni medie, completamente reattivo con supporto per la modalità oscura.
Componente del sistema di classificazione
Un componente del sistema di valutazione reattivo con supporto per il tema scuro, progettato in uno stile minimalista/piatto con una combinazione di colori pastello per le interfacce dei social media. Si tratta di un componente complesso con più elementi interattivi.
Componente del sistema di classificazione
Un componente del sistema di valutazione semplice e coinvolgente progettato con toni ricchi di gioielli, che fornisce un feedback di microinterazione per la documentazione e i siti della knowledge base. Completamente reattivo e supporta la modalità oscura.