Componente del sistema di classificazione
Un componente del sistema di valutazione in stile retrò/vintage progettato con Tailwind CSS, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Rate This Item</h2>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/200/100" alt="Item Image" class="rounded-md">
</div>
<div class="flex justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-gray-300 dark:border-gray-600 mr-2">
<span class="text-gray-800 dark:text-white self-center">John Doe</span>
</div>
<div class="flex justify-center mb-4">
<span class="text-yellow-500 text-3xl">★ ★ ★ ★ ☆</span>
</div>
<div class="flex justify-between mt-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Submit</button>
<button class="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Cancel</button>
</div>
</div>Componenti correlati
Skeuomorphic_Jewel_Tone_Rating_System_Simple
Un componente del sistema di valutazione semplice e reattivo con un design scheumorfico, una combinazione di colori dei toni gioiello e il supporto della modalità scura, adatto per siti Web senza scopo di lucro/beneficenza.
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.
Monospace_Developer_Rating_System_Component
Un componente del sistema di valutazione pulito e ispirato al codice per le interfacce dei social media, con caratteri monospace, estetica del terminale e colori complementari. È completamente reattivo con il supporto della modalità oscura.