Componente de comparación de productos
Un componente de comparación de productos simple diseñado para la interfaz de usuario del modo oscuro con un esquema de color en escala de grises. Cuenta con un diseño básico con elementos mínimos, ideal para el contenido del blog y la lectura.
Código HTML
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-xl font-bold mb-4">Product Comparison</h2>
<table class="min-w-full">
<thead>
<tr class="bg-gray-700">
<th class="px-4 py-2">Feature</th>
<th class="px-4 py-2">Product A</th>
<th class="px-4 py-2">Product B</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Price</td>
<td class="px-4 py-2">$199</td>
<td class="px-4 py-2">$249</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Rating</td>
<td class="px-4 py-2">⭐⭐⭐⭐</td>
<td class="px-4 py-2">⭐⭐⭐⭐⭐</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Warranty</td>
<td class="px-4 py-2">1 Year</td>
<td class="px-4 py-2">2 Years</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Image</td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=1" alt="Product A" class="rounded" /></td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=2" alt="Product B" class="rounded" /></td>
</tr>
</tbody>
</table>
<div class="flex justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
<span class="ml-2">Reviewed by John Doe</span>
</div>
<a href="#" class="text-blue-400 hover:underline">Read More</a>
</div>
</div>Componentes relacionados
Componente de comparación de productos
Un componente de comparación de productos con un estilo de diseño brutalista, con colores vibrantes y complejidad moderada para exhibir productos o trabajar en un portafolio.
Componente de comparación de productos de brutalismo
Un componente de comparación de productos de estilo brutalista diseñado para sistemas de reservas, con una paleta de colores bosque/verde, alto contraste y diseños inusuales. Es totalmente sensible y es compatible con el modo oscuro.
Componente de comparación de productos
Un componente de comparación de productos receptivo con elementos de diseño similares a 3D, compatibilidad con temas oscuros e integración de imágenes de marcador de posición para la visualización de productos y avatares de usuario mediante picsum.photos y randomuser.me.