Composants Comparaison des produits Composant de comparaison de produits

Composant de comparaison de produits

Un composant simple et ludique de comparaison de produits conçu avec des couleurs d’automne, adapté à la documentation ou aux sites wiki. Dispose d’éléments arrondis, d’une réactivité totale et d’une prise en charge du mode sombre.

Aperçu

HTML Code

<div class="p-4 sm:p-6 lg:p-8 bg-orange-50 dark:bg-stone-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-200 mb-2">Compare Our Fun Features!</h2>
      <p class="text-orange-600 dark:text-orange-300 text-base sm:text-lg">See how our playful products stack up.</p>
    </div>

    <div class="flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-orange-200 dark:divide-stone-700">

      <!-- Product 1 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center">
        <h3 class="text-xl sm:text-2xl font-bold text-orange-700 dark:text-orange-300 mb-4">Happy Widget 🥳</h3>
        <img src="https://picsum.photos/300/200?random=1" alt="Happy Widget" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">
        
        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Simple Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Playful Interface</li>
          <li class="flex items-center justify-center"><span class="text-red-500 mr-2 text-lg">&#10007;</span> Advanced Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Friendly Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 mb-6">$19<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-orange-500 text-white font-semibold rounded-full shadow-lg hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition duration-300 ease-in-out">Choose Happy!</a>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center bg-orange-50 dark:bg-stone-700">
        <h3 class="text-xl sm:text-2xl font-bold text-burgundy-900 dark:text-burgundy-100 mb-4">Super Gizmo ✨</h3>
        <img src="https://picsum.photos/300/200?random=2" alt="Super Gizmo" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">

        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Quick Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Robust Interface</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Powerful Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Premium Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-burgundy-900 dark:text-burgundy-100 mb-6">$39<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-burgundy-600 text-white font-semibold rounded-full shadow-lg hover:bg-burgundy-700 focus:outline-none focus:ring-4 focus:ring-burgundy-300 dark:focus:ring-burgundy-700 transition duration-300 ease-in-out">Get Gizmo Fun!</a>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700 border-t border-orange-200 dark:border-stone-600">
      <p class="text-orange-700 dark:text-orange-300 text-sm sm:text-base">Need more details? Check out our <a href="#" class="font-semibold underline hover:text-orange-800 dark:hover:text-orange-200">full feature list</a>!</p>
    </div>

  </div>
</div>

Composants associés

Composant de comparaison de produits

Un composant de comparaison de produits ludique et joyeux avec des éléments arrondis et une palette de couleurs complémentaires, adapté à un tableau de bord. Dispose d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir

Composant de comparaison de produits

Un composant de comparaison de produits skeuomorphe conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir

Composant de comparaison de produits

Un composant de comparaison de produits avec le style de conception Skeuomorphism, la palette de couleurs pastel et le niveau de complexité modéré, conçu pour les tableaux de bord. Il comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir