Componentes Comparación de productos Componente de comparación de 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.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Product Comparison</h2>

  <!-- Comparison Table -->
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-lime-50 dark:bg-lime-900">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product B</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product C</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Image</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productA/200/200" alt="Product A">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product A</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productB/200/200" alt="Product B">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product B</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productC/200/200" alt="Product C">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product C</p>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$199.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$249.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$179.99</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★☆</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★★</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★☆☆</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C1</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C2</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Availability</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 dark:text-red-400">Out of Stock</td>
        </tr>
        <!-- Add more rows for additional features as needed -->
      </tbody>
    </table>
  </div>

  <!-- Call to Action Buttons -->
  <div class="mt-6 flex flex-col sm:flex-row justify-around items-center space-y-4 sm:space-y-0 sm:space-x-4">
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product A
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product B
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-300 cursor-not-allowed dark:bg-lime-700 dark:text-lime-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800" disabled>
      Buy Product C (Out of Stock)
    </button>
  </div>

  <!-- Additional Interactive Elements -->
  <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Product A Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product A Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>High performance processor</li>
        <li>Long-lasting battery</li>
        <li>Excellent user reviews</li>
      </ul>
    </div>

    <!-- Product B Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product B Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Superior camera quality</li>
        <li>Sleek, slim design</li>
        <li>Advanced security features</li>
      </ul>
    </div>

    <!-- Product C Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product C Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Budget-friendly option</li>
        <li>Good for everyday use</li>
        <li>Compact and portable</li>
      </ul>
    </div>
  </div>

  <!-- User Reviews Section -->
  <div class="mt-8">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h3>
    <div class="space-y-4">
      <!-- Review 1 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Jane Doe</p>
          <p class="text-sm text-yellow-500">★★★★★</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product B is absolutely fantastic! The camera is unreal, and it's so fast. Highly recommend!"</p>
        </div>
      </div>
      <!-- Review 2 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">John Smith</p>
          <p class="text-sm text-yellow-500">★★★★☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product A is a solid choice for the price. Does everything I need it to do. Battery life is impressive."</p>
        </div>
      </div>
      <!-- Review 3 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Emily White</p>
          <p class="text-sm text-yellow-500">★★★☆☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product C is okay for the budget, but you definitely get what you pay for. Wish the camera was better."</p>
        </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.

Abrir

Componente de comparación de productos de neumorfismo

Un componente de comparación de productos simple y receptivo en estilo Neumorphism con tonos tierra, compatibilidad con temas oscuros y sin JavaScript.

Abrir

Componente de comparación de productos - Crypto

Un componente de comparación de productos receptivo con un diseño de lujo/premium, combinación de colores dulces/dulces, adaptado para aplicaciones de criptomonedas/blockchain. Cuenta con soporte para modo oscuro, tipografía elegante y datos de marcador de posición.

Abrir