Componente del sistema di classificazione
Un componente minimalista del sistema di valutazione dal design piatto adatto per siti Web aziendali, con un layout reattivo e supporto per temi scuri.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
<div class="flex items-center space-x-2 mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<div class="flex">
<span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
</div>
</div>
<textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
<button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>Componenti correlati
Componente del sistema di classificazione
Componente del sistema di valutazione con stile neumorfismo, effetti reattivi e supporto per temi scuri.
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.
Componente del sistema di classificazione
Un complesso componente del sistema di valutazione per l'e-commerce con design minimalista/piatto, combinazione di colori in scala di grigi, design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Niente JavaScript. Utilizza picsum.photos e randomuser.me per immagini e avatar.