Cerca componenti

Categorie

Componenti Confronto prodotti

Confronto prodotti

Strumento per confrontare più prodotti

Componente di confronto dei prodotti

Un semplice componente di confronto dei prodotti progettato per l'interfaccia utente in modalità scura che utilizza una combinazione di colori in scala di grigi. Presenta un layout di base con elementi minimi, ideale per i contenuti del blog e per scopi di lettura.

Aperto Anteprima

                <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>

Confronto tra i prodotti Brutalist

Componente di confronto dei prodotti Brutalist per i social media con combinazione di colori monocromatica e supporto per la modalità scura

Aperto Anteprima

                <div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
  <h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
  <div class="grid grid-cols-2 gap-4">
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product A</h3>
      <img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
    </div>
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product B</h3>
      <img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature X</li>
        <li>Feature Y</li>
        <li>Feature Z</li>
      </ul>
    </div>
  </div>
</div>

Componente di confronto dei prodotti

Un componente di confronto dei prodotti semplice e reattivo con un design glassmorphism, una combinazione di colori del tono della terra e il supporto della modalità scura. Visualizza due schede prodotto affiancate su schermi più grandi e impilate su schermi più piccoli.

Aperto Anteprima

                <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>

Componente di confronto dei prodotti

Un componente reattivo per il confronto dei prodotti con elementi di design simili a 3D, supporto per temi scuri e integrazione di immagini segnaposto per la visualizzazione dei prodotti e avatar degli utenti utilizzando picsum.photos e randomuser.me.

Aperto Anteprima

                <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>

Componente di confronto dei prodotti

Un componente di confronto dei prodotti reattivo con stile Material Design utilizzando Tailwind CSS, con layout basati su griglia, ombre e supporto per temi scuri.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-4xl mx-auto">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200 text-center">Product Comparison</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
            <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Product 1" />
            <h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of Product 1 goes here.</p>
            <div class="flex items-center mt-2">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
            <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=2" alt="Product 2" />
            <h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of Product 2 goes here.</p>
            <div class="flex items-center mt-2">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
            </div>
        </div>
    </div>
</div>

Componente di confronto dei prodotti

Un componente di confronto dei prodotti scheumorfico progettato con Tailwind CSS con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="w-full md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
        <img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
        </div>
    </div>
    <div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
        <img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
        </div>
    </div>
</div>

Componente di confronto dei prodotti

Un componente reattivo per il confronto dei prodotti con un'estetica retrò/vintage degli anni '80/'90, con supporto per temi scuri con Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic1/100/100" alt="Product 1 Image" />
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 1</h3>
                    <p class="text-gray-500 dark:text-gray-400">Description of Product 1. It's a great product for your needs.</p>
                </div>
            </div>
            <div class="flex justify-between items-center mt-4">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$29.99</p>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic2/100/100" alt="Product 2 Image" />
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 2</h3>
                    <p class="text-gray-500 dark:text-gray-400">Description of Product 2. This product serves your unique demands.</p>
                </div>
            </div>
            <div class="flex justify-between items-center mt-4">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$39.99</p>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>