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
Composant du système d’évaluation
Un composant de système de notation réactif avec prise en charge du thème sombre, conçu dans un style minimaliste/plat avec une palette de couleurs pastel pour les interfaces de médias sociaux. Il s’agit d’un composant complexe avec de multiples éléments interactifs.
Composant du système d’évaluation
Un composant de système d’évaluation de style rétro/vintage conçu avec Tailwind CSS, avec un design réactif et la prise en charge du thème sombre.
Composant du système d’évaluation
Un composant complexe de système d’évaluation à thème rétro pour les médias sociaux, doté d’une palette de couleurs monochromatiques. Il est entièrement réactif et prend en charge un mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript.