Composants
Comparaison des produits
Composant de comparaison de produits - Neumorphisme monochromatique
Composant de comparaison de produits - Neumorphisme monochromatique
Un composant réactif de comparaison de produits avec un style de conception neumorphique et une palette de couleurs monochromatiques, adapté aux sites Web d’événements/conférences. Inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-200 p-4 dark:bg-gray-800 flex items-center justify-center font-sans">
<div class="container mx-auto p-4 md:p-8 rounded-3xl shadow-xl dark:shadow-xl-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight leading-tight transition-colors duration-300">
Choose Your <span class="text-purple-600 dark:text-purple-400">Event Pass</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Plan 1: Basic Pass -->
<div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
<div class="flex-grow">
<h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Standard Access</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">Ideal for basic conference attendance and networking.</p>
<div class="text-4xl font-extrabold mb-8">
$99<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
</div>
<ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Access to Main Sessions
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Networking Opportunities
</li>
<li class="flex items-center line-through text-gray-500 dark:text-gray-500">
<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
Workshop Access
</li>
<li class="flex items-center line-through text-gray-500 dark:text-gray-500">
<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
Exclusive Q&A Sessions
</li>
</ul>
</div>
<button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Get Standard Pass
</button>
</div>
<!-- Plan 2: Premium Pass (Recommended) -->
<div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover relative border-2 border-purple-500 dark:border-purple-400">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-500 dark:bg-purple-400 text-white text-sm font-bold rounded-full shadow-md">
Recommended
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">VIP Experience</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">Full access to all event features and exclusive content.</p>
<div class="text-4xl font-extrabold mb-8">
$249<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
</div>
<ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Access to Main Sessions
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Networking Opportunities
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Full Workshop Access
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Exclusive Q&A Sessions
</li>
</ul>
</div>
<button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Get VIP Pass
</button>
</div>
<!-- Plan 3: Enterprise Pass -->
<div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
<div class="flex-grow">
<h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Team Bundle</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">Designed for teams, with additional benefits and support.</p>
<div class="text-4xl font-extrabold mb-8">
$499<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/5 passes</span>
</div>
<ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
All VIP Pass Features
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
5 Team Members Included
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Dedicated Support
</li>
<li class="flex items-center">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Private Networking Lounge Access
</li>
</ul>
</div>
<button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Get Team Bundle
</button>
</div>
</div>
</div>
<!-- Tailwind JIT custom styles for neumorphism shadows (typically in tailwind.config.js) -->
<style>
.shadow-xl {
box-shadow: 10px 10px 20px rgba(174, 174, 192, .4), -10px -10px 20px rgba(255, 255, 255, 1);
}
.dark\:shadow-xl-dark {
box-shadow: 10px 10px 20px rgba(0, 0, 0, .4), -10px -10px 20px rgba(120, 120, 120, .2);
}
.shadow-neumorphic {
box-shadow: 8px 8px 16px rgba(174, 174, 192, .4), -8px -8px 16px rgba(255, 255, 255, 1);
}
.dark\:shadow-neumorphic {
box-shadow: 8px 8px 16px rgba(0, 0, 0, .4), -8px -8px 16px rgba(120, 120, 120, .2);
}
.hover\:shadow-neumorphic-hover:hover {
box-shadow: 4px 4px 8px rgba(174, 174, 192, .4), -4px -4px 8px rgba(255, 255, 255, 1);
}
.dark\:hover\:shadow-neumorphic-dark-hover:hover {
box-shadow: 4px 4px 8px rgba(0, 0, 0, .4), -4px -4px 8px rgba(120, 120, 120, .2);
}
.shadow-neumorphic-button {
box-shadow: 3px 3px 6px rgba(174, 174, 192, .4), -3px -3px 6px rgba(255, 255, 255, 1);
}
.dark\:shadow-neumorphic-button-dark {
box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), -3px -3px 6px rgba(120, 120, 120, .2);
}
.hover\:shadow-neumorphic-button-hover:hover {
box-shadow: inset 2px 2px 5px rgba(174, 174, 192, .4), inset -3px -3px 7px rgba(255, 255, 255, 1);
}
.dark\:hover\:shadow-neumorphic-button-dark-hover:hover {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .6), inset -3px -3px 7px rgba(120, 120, 120, .3);
}
</style>
</div>Composants associés
Composant de comparaison de produits
Un composant simple et réactif de comparaison de produits avec une esthétique Memphis Design, utilisant une palette de couleurs rétro/vintage. Conçu pour les outils CRM/Business, il prend en charge le mode sombre et affiche les principales fonctionnalités de deux produits.
Composant de comparaison de produits
Un composant de comparaison de produits réactif dans une esthétique rétro/vintage des années 80/90, avec prise en charge du thème sombre avec Tailwind CSS.
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.