Componente del sistema de clasificación
Un componente web interactivo para calificar elementos con un diseño esqueuomórfico que imita a sus homólogos del mundo real. Adecuado para exhibir trabajos o productos en un portafolio.
Código HTML
<div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
<h2 class="text-xl font-bold mb-4">Rating System</h2>
<div class="flex items-center mb-6">
<img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
<div>
<h3 class="text-lg font-semibold">Product Name</h3>
<p class="text-gray-400">Product description goes here.</p>
<div class="flex items-center mt-2">
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-500">(3/5)</span>
</div>
</div>
</div>
<h4 class="text-md font-semibold mb-3">User Reviews</h4>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">John Doe</span>
<span class="text-gray-400 ml-2">5 hours ago</span>
</div>
<p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
</div>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">Jane Smith</span>
<span class="text-gray-400 ml-2">3 hours ago</span>
</div>
<p class="text-gray-300">Not what I expected, but decent quality overall.</p>
</div>
<div class="flex items-center justify-between mt-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
</div>
</div>Componentes relacionados
Skeuomorphic_Jewel_Tone_Rating_System_Simple
Un componente del sistema de calificación simple y receptivo con un diseño esqueuomórfico, combinación de colores en tono joya y compatibilidad con modo oscuro, adecuado para sitios web sin fines de lucro / caridad.
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.
Componente del sistema de clasificación
Un complejo componente del sistema de clasificación de temática retro para las redes sociales, con un esquema de color monocromático. Es totalmente responsivo y admite un modo oscuro. Este componente utiliza solo HTML y Tailwind CSS, sin JavaScript.