Brutalism_Travel_Rating_System
Un composant de système de notation simple, de style brutaliste, pour les sites Web de voyage et de tourisme, avec des neutres froids et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-800 font-mono">厕
<div class="max-w-md mx-auto border-2 border-gray-900 dark:border-gray-50 bg-white dark:bg-gray-950 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(17,24,39,1)] dark:shadow-[8px_8px_0px_0px_rgba(229,231,235,1)]">
<h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-4 uppercase tracking-widest">RATE YOUR TRIP</h2>
<div class="flex items-center space-x-2 sm:space-x-4 mb-6">
<img src="https://picsum.photos/id/1015/60/60" alt="Destination" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-gray-900 dark:border-gray-50 flex-shrink-0">
<div class="flex-grow">
<p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-50">Alpine Adventure</p>
<p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300">Zurich, Switzerland</p>
</div>
</div>
<div class="flex justify-between mb-6">
<button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
★
</button>
<button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
★
</button>
<button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
★
</button>
<button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
★
</button>
<button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
border-2 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
★
</button>
</div>
<button class="w-full bg-gray-900 dark:bg-gray-50 text-white dark:text-gray-900 py-3 sm:py-4
text-lg sm:text-xl font-bold uppercase tracking-widest
border-2 border-gray-900 dark:border-gray-50
hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(17,24,39,1)] dark:shadow-[4px_4px_0px_0px_rgba(229,231,235,1)]">
SUBMIT RATING
</button>
</div>
</div>Composants associés
Monospace_Developer_Rating_System_Component
Un composant de système d’évaluation propre, inspiré du code, pour les interfaces de médias sociaux, avec des polices monospace, une esthétique terminale et des couleurs complémentaires. Il est entièrement réactif avec la prise en charge du mode sombre.
Composant du système d’évaluation
Un composant de système d’évaluation simple et attrayant conçu avec des tons riches et précieux, fournissant un retour d’information de micro-interaction pour la documentation et les sites de base de connaissances. Entièrement réactif et prend en charge le mode sombre.
Composant du système d’évaluation
Un composant de classement de conception minimaliste et plat adapté aux applications de tableau de bord, avec des tons de bijou et une réactivité totale avec prise en charge du mode sombre.