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.
Codice HTML
<div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
<h2 class="text-xl font-bold mb-4">Rating System</h2>
<div class="flex items-center mb-6">
<img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
<div>
<h3 class="text-lg font-semibold">Product Name</h3>
<p class="text-gray-400">Product description goes here.</p>
<div class="flex items-center mt-2">
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-500">(3/5)</span>
</div>
</div>
</div>
<h4 class="text-md font-semibold mb-3">User Reviews</h4>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">John Doe</span>
<span class="text-gray-400 ml-2">5 hours ago</span>
</div>
<p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
</div>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">Jane Smith</span>
<span class="text-gray-400 ml-2">3 hours ago</span>
</div>
<p class="text-gray-300">Not what I expected, but decent quality overall.</p>
</div>
<div class="flex items-center justify-between mt-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
</div>
</div>Componenti correlati
Monospace_Developer_Autumn_Rating_System_Component
Un componente complesso del sistema di classificazione ispirato al monospazio con colori autunnali per applicazioni industriali e manifatturiere. Presenta un design pulito, più elementi interattivi, reattività completa e 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 retrò
Un semplice componente del sistema di valutazione in stile retrò per l'e-commerce, con colori vivaci e supporto per temi scuri utilizzando Tailwind CSS.