Componente del sistema di classificazione
Un componente del sistema di valutazione progettato in stile retrò/vintage, che utilizza una combinazione di colori complementari e un'interfaccia complessa per i contenuti del blog. Questo componente supporta la modalità oscura ed è reattivo utilizzando Tailwind CSS.
Codice HTML
<div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Our Content</h2>
<div class="flex items-center justify-center mb-6">
<img src="https://picsum.photos/60/60" alt="Blog Post" class="rounded-full border-2 border-blue-500 mr-3">
<div>
<p class="text-lg text-gray-700 dark:text-gray-300">Fantastic Blog Post Title</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Published on January 1, 2023</p>
</div>
</div>
<div class="flex justify-center mb-6">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-gray-300">★</span>
</div>
<textarea class="w-full h-24 p-3 border border-blue-400 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" placeholder="Leave your feedback here..."></textarea>
<button class="w-full mt-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">Submit Rating</button>
<div class="flex items-center justify-between mt-4 text-gray-700 dark:text-gray-300">
<span>👍 120 Likes</span>
<span>💔 5 Dislikes</span>
</div>
</div>Componenti correlati
Brutalism_Travel_Rating_System
Un semplice sistema di valutazione in stile brutalista per siti web di viaggi e turismo, con neutri freddi e supporto per la modalità oscura.
Bauhaus_Music_Rating_System
Un componente del sistema di classificazione musica/audio reattivo con un design ispirato al Bauhaus, che utilizza una combinazione di colori viola/viola. Include il supporto per la modalità oscura e la funzionalità di valutazione interattiva a stelle (solo visiva, senza JS).
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.