Componente de comparación de productos
Un componente de comparación de productos simple y receptivo con un diseño de morfismo de vidrio, combinación de colores en tonos tierra y compatibilidad con modo oscuro. Muestra dos tarjetas de producto una al lado de la otra en pantallas más grandes y apiladas en pantallas más pequeñas.
Código HTML
<div class="container mx-auto p-4">
<div class="flex flex-col lg:flex-row gap-4">
<!-- Product 1 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
<!-- Product 2 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
</div>
</div>Componentes relacionados
RetroVintageComparación de Productos
Componente de comparación de productos retro/vintage para el salpicadero. Diseño monocromático simple con soporte para modo oscuro. Utiliza Tailwind CSS.
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.
Componente de comparación de productos
Un componente de comparación de productos responsivo con una estética Retro/Vintage de los años 80/90, con soporte para temas oscuros con Tailwind CSS.