Componente 24 del sistema de clasificación
Un componente del sistema de clasificación diseñado en 3D que admite temas oscuros y efectos responsivos. Este componente cuenta con estrellas para las calificaciones, avatares de usuario y una sección de comentarios.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
</div>
</div>
<div class="flex mt-4 space-x-1">
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
<img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
</div>
</div>Componentes relacionados
Componente del sistema de clasificación
Un componente del sistema de clasificación receptivo con soporte para temas oscuros, diseñado en un estilo minimalista / plano con un esquema de color pastel para interfaces de redes sociales. Es un componente complejo con múltiples elementos interactivos.
Componente del sistema de clasificación
Componente del sistema de clasificación con estilo de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.
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.