Brutalism_Travel_Rating_System
Un componente simple del sistema de clasificación de estilo brutalista para sitios web de viajes y turismo, con neutros geniales y soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente del sistema de clasificación de pasteles de la Bauhaus
Un componente del sistema de calificación receptivo y funcional con formas geométricas y colores pastel, adecuado para la integración en el tablero. Incluye soporte para modo oscuro.
Componente del sistema de clasificación
Un componente del sistema de clasificación responsivo diseñado en un estilo Brutalism usando Tailwind CSS. Es compatible con el tema oscuro y tiene un alto contraste con un diseño crudo y atrevido.
Monospace_Developer_Autumn_Rating_System_Component
Un componente complejo del sistema de clasificación inspirado en el monoespacio con colores otoñales para aplicaciones industriales y de fabricación. Cuenta con un diseño limpio, múltiples elementos interactivos, capacidad de respuesta total y compatibilidad con el modo oscuro.