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 réactif de comparaison de produits conçu avec Material Design à l’aide de Tailwind CSS, avec des mises en page basées sur des grilles, des ombres et la prise en charge des thèmes sombres.
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
EarthyComparaison des produits
Un composant réactif de comparaison de produits pour le commerce électronique, avec trois fiches produits. Stylisé avec Tailwind CSS en utilisant une palette de couleurs de terre (bruns, verts, ambres) et des éléments de conception 3D simples comme des ombres et des barres d’accentuation pour plus de profondeur et d’engagement. Inclut la prise en charge du mode sombre et utilise des images de remplacement de picsum.photos.