Componente del sistema di valutazione 24
Un componente del sistema di classificazione progettato in 3D che supporta il tema scuro e gli effetti reattivi. Questo componente presenta stelle per le valutazioni, gli avatar degli utenti e una sezione commenti.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
</div>
</div>
<div class="flex mt-4 space-x-1">
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
<img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
</div>
</div>Componenti correlati
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 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 vibrante neumorfica
Un componente complesso e interattivo del sistema di valutazione progettato con uno stile neumorfico e una combinazione di colori vivaci, adatto per forum e piattaforme comunitarie. Include valutazioni a stelle, voto su/giù e un display numerico, con reattività completa e supporto per la modalità scura.