Componenti Sistema di valutazione Componente del sistema di classificazione

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.

Anteprima

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

Un componente web reattivo per la valutazione degli elementi con un design scheumorfico che imita le controparti del mondo reale. Adatto per mostrare lavori o prodotti in un portfolio.

Aperto

Componente del sistema di classificazione

Componente del sistema di valutazione con stile neumorfismo, effetti reattivi e supporto per temi scuri.

Aperto

Componente del sistema di classificazione

Un componente del sistema di valutazione dal design minimalista/piatto con una combinazione di colori complementari, complessità moderata, adatto per il consumo di blog/contenuti. Presenta un design reattivo con supporto per temi scuri utilizzando le classi CSS Tailwind e senza JavaScript.

Aperto