Composants Comparaison des produits RetroVintageComparaison de produits

RetroVintageComparaison de produits

Composant de comparaison de produits rétro/vintage pour tableau de bord. Conception monochromatique simple avec prise en charge du mode sombre. Utilise Tailwind CSS.

Aperçu

HTML Code

<div class="container mx-auto p-4 font-mono">

  <!-- Product Comparison Table -->
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Comparison</h2>

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <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="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-gray-100">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$19.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$24.50</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.5 stars</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.8 stars</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">No</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

Composants associés

Composant de comparaison de produits

Composant de comparaison de produits avec un design minimaliste/plat, une palette de couleurs de tons de terre et une complexité modérée pour le tableau de bord à l’aide de Tailwind CSS. Le composant est réactif et prend en charge le thème sombre. Pas de JavaScript.

Ouvrir

Composant de comparaison de produits

Un composant de comparaison de produits de luxe/haut de gamme pour le matériel de photographie, doté d’un design élégant, d’une typographie sophistiquée et d’une palette de couleurs très contrastée. Comprend une mise en page réactive et la prise en charge du mode sombre.

Ouvrir

Comparaison des produits brutalistes

Composant de comparaison de produits brutaliste pour les médias sociaux avec schéma de couleurs monochromatiques et prise en charge du mode sombre

Ouvrir