Componente del sistema di classificazione
Un componente del sistema di valutazione in stile glassmorphic adatto per la presentazione di lavori o prodotti di portfolio, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30 ring-1 ring-gray-300 dark:bg-gray-800 dark:bg-opacity-50 dark:ring-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Rate Our Work</h2>
<div class="flex items-center mt-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="ml-3 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<div class="mt-4">
<span class="text-gray-700 dark:text-gray-300">Your Rating:</span>
<div class="flex mt-2">
<label class="flex items-center cursor-pointer">
<input type="radio" name="rating" value="1" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="2" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="3" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="4" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
<label class="flex items-center cursor-pointer ml-1">
<input type="radio" name="rating" value="5" class="hidden"/>
<svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
<polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
</svg>
</label>
</div>
</div>
<div class="flex justify-center mt-4">
<button class="px-4 py-2 text-white font-semibold bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
</div>
<div class="mt-5 flex justify-center dark:text-gray-400">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/id/1015/200/200" alt="Portfolio Image">
</div>
</div>Componenti correlati
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 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.
Componente del sistema di classificazione
Un componente del sistema di valutazione semplice e reattivo con toni seppia/marrone, supporto per la modalità scura e uno stile incentrato sulla microinterazione, adatto per siti Web governativi/di servizio pubblico.