Componente del sistema di classificazione brutalista
Un componente del sistema di valutazione reattivo progettato in stile brutalismo utilizzando Tailwind CSS, con supporto per il tema scuro.
Codice HTML
<div class="flex flex-col items-center bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md w-80">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Us!</h2>
<div class="flex items-center mb-5">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-3 border-2 border-gray-800 dark:border-gray-200">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
</div>
<div class="flex space-x-1 mb-4">
<span class="cursor-pointer text-3xl text-yellow-500">★</span>
<span class="cursor-pointer text-3xl text-yellow-500">★</span>
<span class="cursor-pointer text-3xl text-yellow-500">★</span>
<span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
<span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
</div>
<textarea class="w-full h-24 p-2 border-2 border-gray-800 dark:border-gray-200 bg-transparent text-gray-800 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Leave your feedback..."></textarea>
<button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold rounded-md hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500">Submit</button>
</div>Componenti correlati
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 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.
Sistema di valutazione del Glassmorphism
Un sistema di valutazione in stile Glassmorphism con colori complementari, progettato per le piattaforme di social media. Include un layout reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS.