Brutalism_Travel_Rating_System
Eine einfache, brutalistische Bewertungssystemkomponente für Reise- und Tourismus-Websites mit coolen Neutraltönen und Unterstützung für den Dunkelmodus.
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>
Verwandte Komponenten
Komponente des Bewertungssystems
Eine komplexe, retro-thematische Bewertungssystemkomponente für soziale Medien mit einem monochromatischen Farbschema. Es reagiert vollständig und unterstützt einen Dunkelmodus. Diese Komponente verwendet nur HTML und Tailwind CSS ohne JavaScript.
Monospace_Developer_Rating_System_Component
Eine saubere, vom Code inspirierte Bewertungssystemkomponente für Social-Media-Schnittstellen mit Monospace-Schriftarten, Terminalästhetik und Komplementärfarben. Es reagiert vollständig und unterstützt den Dunkelmodus.
Komponente des Retro-Rating-Systems
Eine Retro-/Vintage-Bewertungssystemkomponente mit Erdtönen, die für Business-/Unternehmenswebsites entwickelt wurde. Es unterstützt responsives Design und dunkles Design.