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 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
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.
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.