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.
Código HTML
<div class="container mx-auto px-4 py-8">
<div class="dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden">
<div class="flex flex-col md:flex-row">
<!-- Product 1 -->
<div class="flex-1 p-6 dark:border-gray-700 border-b md:border-b-0 md:border-r relative">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20"></div>
<div class="relative z-10">
<h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product A</h3>
<img src="https://picsum.photos/seed/producta/400/300" alt="Product A" class="mx-auto mb-6 rounded-md shadow-md">
<ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300">Learn More</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="flex-1 p-6 relative">
<div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600 opacity-20"></div>
<div class="relative z-10">
<h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product B</h3>
<img src="https://picsum.photos/seed/productb/400/300" alt="Product B" class="mx-auto mb-6 rounded-md shadow-md">
<ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition duration-300">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Comparison Table (Optional addition for more detail) -->
<div class="p-6 dark:bg-gray-700 bg-gray-100">
<h4 class="text-lg font-semibold mb-4 dark:text-white text-gray-800">Detailed Comparison</h4>
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
</tr>
</thead>
<tbody class="dark:bg-gray-800 bg-white divide-y divide-gray-200 dark:divide-gray-600">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 1/A</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Maybe</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 2/B</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Some</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 3/C</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">No</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
</tr>
</tbody>
</table>
</div>
<!-- Avatars section -->
<div class="p-6 flex justify-around items-center dark:bg-gray-700 bg-gray-100">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full shadow-md">
</div>
</div>
</div>
Componentes relacionados
Componente de comparación de productos - Estilo corporativo retro
Un componente de comparación de productos receptivo con una estética corporativa retro / vintage que utiliza un esquema de color azul monocromático. Cuenta con múltiples elementos interactivos y soporte para el modo oscuro. El diseño incluye tarjetas de estilo retro con patrones geométricos inspirados en los años 80/90, tipografía de la vieja escuela y acentos tipo píxel. Perfecto para sitios web de negocios que desean destacarse con un diseño nostálgico manteniendo el profesionalismo.
Componente de comparación de productos
Un componente de comparación de productos responsivo diseñado con Material Design usando Tailwind CSS, con diseños basados en cuadrículas, sombras y soporte para temas oscuros.
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.