Componente del sistema de clasificación
Un componente del sistema de clasificación de estilo retro/vintage diseñado con Tailwind CSS, con un diseño responsivo y compatibilidad con temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Rate This Item</h2>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/200/100" alt="Item Image" class="rounded-md">
</div>
<div class="flex justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-gray-300 dark:border-gray-600 mr-2">
<span class="text-gray-800 dark:text-white self-center">John Doe</span>
</div>
<div class="flex justify-center mb-4">
<span class="text-yellow-500 text-3xl">★ ★ ★ ★ ☆</span>
</div>
<div class="flex justify-between mt-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Submit</button>
<button class="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Cancel</button>
</div>
</div>Componentes relacionados
Componente del sistema de clasificación brutalista
Un componente del sistema de calificación responsivo diseñado en un estilo brutalista usando Tailwind CSS, con soporte para temas oscuros.
Componente del sistema de clasificación
Un componente del sistema de clasificación limpio y minimalista con una combinación de colores dulces/dulces, diseñado para datos meteorológicos/climáticos. Utiliza un sistema de cuadrícula y enfatiza la tipografía, con capacidad de respuesta total y soporte para modo oscuro.
Bauhaus_Grayscale_Rating_System_Component
Un componente complejo y receptivo del sistema de calificación diseñado en un estilo Bauhaus con un esquema de color en escala de grises, adecuado para sitios web de eventos y conferencias. Cuenta con elementos interactivos y compatibilidad con el modo oscuro.