Componente de comparación de productos
Un componente de comparación de productos simple y receptivo con soporte para modo oscuro usando Tailwind CSS. Muestra los nombres de los productos, las características y los precios para su comparación.
Código HTML
<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Product Comparison</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Alpha</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
</ul>
<div class="text-2xl font-bold text-center">$49/m</div>
</div>
<!-- Product 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Beta</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
<li>Feature E</li>
</ul>
<div class="text-2xl font-bold text-center">$79/m</div>
</div>
<!-- Product 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Gamma</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
<li>Feature E</li>
<li>Feature F</li>
</ul>
<div class="text-2xl font-bold text-center">$99/m</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de comparación de productos - Colores otoñales orgánicos/inspirados en la naturaleza
Un componente de comparación de productos complejo y receptivo con un diseño inspirado en lo orgánico y la naturaleza, utilizando colores otoñales. Adecuado para aplicaciones deportivas y de fitness, con soporte completo para el modo oscuro.
Componente de comparación de productos
Un componente de comparación de productos simple y receptivo con una estética de Memphis Design, que utiliza una paleta de colores retro / vintage. Diseñado para CRM/Business Tools, es compatible con el modo oscuro y muestra las características clave de dos productos.
Componente de comparación de productos
Un componente de comparación de productos responsivo con soporte para temas oscuros, con un diseño minimalista/plano y una combinación de colores pastel. Este componente complejo es adecuado para tableros, lo que permite a los usuarios comparar múltiples productos con especificaciones detalladas y elementos interactivos.