Componente del sistema de clasificación
Un componente minimalista del sistema de calificación de diseño plano adecuado para sitios web comerciales, con un diseño receptivo y soporte para temas oscuros.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
<div class="flex items-center space-x-2 mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<div class="flex">
<span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
</div>
</div>
<textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
<button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</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.
Bauhaus_Music_Rating_System
Un componente receptivo del sistema de clasificación de música/audio con un diseño inspirado en la Bauhaus, que utiliza un esquema de color púrpura/violeta. Incluye compatibilidad con el modo oscuro y funcionalidad interactiva de clasificación por estrellas (solo visual, no JS).
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.