Componenti Confronto prodotti Componente di confronto dei prodotti

Componente di confronto dei prodotti

Un componente di confronto dei prodotti semplice e reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Visualizza i nomi dei prodotti, le funzionalità e i prezzi per il confronto.

Anteprima

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

Componenti correlati

Componente di confronto dei prodotti per il neumorfismo

Un componente di confronto dei prodotti semplice e reattivo in stile neumorfismo con toni della terra, supporto per temi scuri e assenza di JavaScript.

Aperto

Confronto prodotti terrosi

Un componente reattivo per il confronto dei prodotti per l'e-commerce, con tre schede prodotto. Progettato con Tailwind CSS utilizzando una combinazione di colori dei toni della terra (marroni, verdi, ambra) e semplici elementi di design 3D come ombre e barre di accento per profondità e coinvolgimento. Include il supporto per la modalità oscura e utilizza immagini segnaposto da picsum.photos.

Aperto

Componente di confronto dei prodotti

Un componente di confronto dei prodotti con stile di progettazione Skeuomorphism, combinazione di colori pastello e livello di complessità moderato, progettato per i dashboard. Include un design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS.

Aperto