Composant d’affichage des prix Neumorphic
Un composant d’affichage des prix complexe, réactif et compatible avec le mode sombre, avec un style de conception Neumorphism et une palette de couleurs analogue, adapté à la consommation de blog/contenu. Comporte plusieurs éléments interactifs tels que des bascules et des niveaux détaillés.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-200 dark:bg-gray-800 font-sans min-h-screen flex items-center justify-center transition-colors duration-300">
<div class="max-w-6xl w-full mx-auto p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl dark:shadow-2xl bg-gray-200 dark:bg-gray-800 neumorphic-card transition-all duration-300 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-300/10 via-orange-400/10 to-red-400/10 opacity-5 dark:opacity-10 pointer-events-none rounded-3xl z-0"></div>
<div class="relative z-10">
<header class="mb-8 text-center">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 tracking-tight leading-tight">
Choose Your Perfect Plan
</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Unlock the full potential of our content with a plan that fits your needs. Simple, transparent pricing.
</p>
</header>
<div class="flex justify-center items-center mb-10 transition-all duration-300">
<span class="text-gray-700 dark:text-gray-300 mr-3 text-lg font-medium">Monthly</span>
<label for="toggle-pricing" class="relative inline-flex items-center cursor-pointer neumorphic-switch-container shadow-inner dark:shadow-inner-dark hover:shadow-outer hover:dark:shadow-outer-dark rounded-full p-1 transition-all duration-300">
<input type="checkbox" id="toggle-pricing" class="sr-only peer">
<div class="w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:bg-gradient-to-r peer-checked:from-orange-400 peer-checked:to-red-500 peer-focus:outline-none transition-all duration-300"></div>
<span class="absolute left-1 top-1 w-6 h-6 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-transform duration-300 peer-checked:translate-x-full peer-checked:bg-yellow-300 dark:peer-checked:bg-orange-300"></span>
</label>
<span class="block relative text-gray-700 dark:text-gray-300 ml-3 text-lg font-medium">
Annually
<span class="px-2 py-1 ml-2 text-xs font-semibold rounded-full bg-orange-400 dark:bg-red-500 text-white neumorphic-discount-tag shadow-inner dark:shadow-inner-dark transform -rotate-6 absolute -top-4 -right-10 whitespace-nowrap">Save 20%!</span>
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Basic Plan Card -->
<div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Basic</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Access to essential articles and limited features.</p>
<div class="flex items-baseline mb-6">
<span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">$9</span>
<span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
</div>
<ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Unlimited Basic Content Access</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Ad-supported reading</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Email Newsletter</span>
</li>
<li class="flex items-center text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 text-gray-400 dark:text-gray-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>
<span>No offline reading</span>
</li>
</ul>
<button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
Choose Basic
</button>
</div>
<!-- Pro Plan Card -->
<div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col relative overflow-hidden border-2 border-transparent hover:border-orange-400 dark:hover:border-red-500 ring-2 ring-transparent hover:ring-orange-300 dark:hover:ring-red-400">
<div class="absolute top-0 right-0 py-2 px-6 bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-500 dark:to-red-600 text-white font-bold text-sm rounded-bl-xl shadow-md transform rotate-3 origin-top-right translate-x-2 -translate-y-2 neumorphic-discount-tag dark:neumorphic-discount-tag-dark">
Most Popular
</div>
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Pro</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Full access to premium content and rich features.</p>
<div class="flex items-baseline mb-6">
<span class="text-4xl sm:text-5xl font-extrabold text-red-500 dark:text-red-400 neumorphic-text-shadow transition-colors duration-300">$19</span>
<span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
</div>
<ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>All Basic Features</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Ad-free experience</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Offline reading & downloads</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Priority Email Support</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Early access to new content</span>
</li>
</ul>
<button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-white bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-500 dark:to-red-600 hover:from-yellow-300 hover:to-orange-400 dark:hover:from-red-600 dark:hover:to-red-700 transition-all duration-300">
Choose Pro
</button>
</div>
<!-- Enterprise Plan Card -->
<div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Enterprise</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Custom solution for teams and large organizations.</p>
<div class="flex items-baseline mb-6">
<span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">Custom</span>
<span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/quote</span>
</div>
<ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>All Pro Features</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Dedicated Account Manager</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Custom Integrations</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>
<span>24/7 Premium Support</span>
</li>
</ul>
<button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
Contact Sales
</button>
</div>
</div>
<p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
*Prices exclude VAT. Cancel anytime. No hidden fees.
</p>
</div>
</div>
</div>
<style>
/* Base Neumorphic Card */
.neumorphic-card {
box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.4), -10px -10px 20px #FFFFFF;
}
.dark .neumorphic-card {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(50, 50, 50, 0.4);
}
/* Inner Neumorphic Card / Pricing Tier */
.neumorphic-card-inner {
box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.2), inset -5px -5px 10px #FFFFFF;
}
.dark .neumorphic-card-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(50, 50, 50, 0.3);
}
/* Inner Neumorphic Card Hover State */
.neumorphic-card-hover:hover {
box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.2), -8px -8px 16px #FFFFFF, inset 2px 2px 5px rgba(174, 174, 192, 0.1), inset -2px -2px 5px #FFFFFF;
}
.dark .neumorphic-card-hover-dark:hover {
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(50, 50, 50, 0.3), inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(50, 50, 50, 0.2);
}
/* Buttons - Neumorphic Style */
.neumorphic-button {
box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF;
}
.neumorphic-button:active {
box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.2), inset -3px -3px 6px #FFFFFF;
}
.dark .neumorphic-button-dark {
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4);
}
.dark .neumorphic-button-dark:active {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(50, 50, 50, 0.3);
}
/* Toggle Switch Container */
.neumorphic-switch-container {
box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.2), inset -4px -4px 8px #FFFFFF;
}
.dark .neumorphic-switch-container {
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(50, 50, 50, 0.3);
}
.neumorphic-switch-container:hover {
box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF, inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF; /* Subtle outer shadow on hover */
}
.dark .neumorphic-switch-container:hover {
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4), inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
}
/* Discount Tag */
.neumorphic-discount-tag {
box-shadow: 3px 3px 6px rgba(174, 174, 192, 0.4), -3px -3px 6px #FFFFFF;
border: 1px solid rgba(255,165,0,0.2); /* Subtle border for definition */
}
.dark .neumorphic-discount-tag {
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(50, 50, 50, 0.4);
border: 1px solid rgba(255,99,71,0.2); /* Subtle border for definition */
}
/* Neumorphic Icon */
.neumorphic-icon {
border-radius: 9999px; /* Make it circular */
box-shadow: inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF;
}
.dark .neumorphic-icon {
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
}
/* Text Shadow for prices */
.neumorphic-text-shadow {
text-shadow: 2px 2px 4px rgba(174, 174, 192, 0.3), -2px -2px 4px #FFFFFF;
}
.dark .neumorphic-text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(50, 50, 50, 0.3);
}
/* Tailwind's dark class is applied to the <html> tag or higher */
/* Custom properties or base classes should respect this */
</style>
<script>
// Basic functionality for the toggle switch (for a true SPA this would be a framework component)
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('toggle-pricing');
if (toggle) {
toggle.addEventListener('change', () => {
// In a real application, you'd update pricing data here
// For this example, we'll just log the state
console.log('Pricing switched to:', toggle.checked ? 'Annually' : 'Monthly');
// Example of visually altering prices (not dynamic data update)
const proPrice = document.querySelector('.neumorphic-card-inner:nth-child(2) .neumorphic-text-shadow');
const proTime = document.querySelector('.neumorphic-card-inner:nth-child(2) .ml-2');
if (toggle.checked) {
// Annual pricing (e.g., $19 * 12 * 0.8 = $182.4 -> $15 per month equivalent)
proPrice.textContent = '$15';
proTime.textContent = '/month (billed annually)';
} else {
// Monthly pricing
proPrice.textContent = '$19';
proTime.textContent = '/month';
}
});
}
// Dark mode toggle simulation (for demonstration purposes)
// This part is for showcasing dark mode if an external toggle isn't available
// In a real app, you'd use a robust dark mode implementation
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
const enableDarkMode = () => {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
};
const disableDarkMode = () => {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
};
// Check local storage for theme
const storedTheme = localStorage.getItem('theme');
if (storedTheme === 'dark') {
enableDarkMode();
} else if (storedTheme === 'light') {
disableDarkMode();
} else if (systemDarkMode.matches) {
enableDarkMode(); // Default to system preference if no stored theme
}
// Listen for system theme changes
systemDarkMode.addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) { // Only apply if no user preference set
e.matches ? enableDarkMode() : disableDarkMode();
}
});
});
</script>Composants associés
Composant d’affichage des prix
Un composant d’affichage du prix minimaliste/plat pour une utilisation sur le tableau de bord, avec un design réactif et une prise en charge du mode sombre.
Composant d’affichage des prix 22
Un composant d’affichage de prix minimaliste qui met en valeur l’image, le nom, le prix et un bouton d’un produit à ajouter au panier. Conçu avec une réactivité et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant d’affichage des prix
Un composant d’affichage des prix sur le thème rétro/vintage pour le e-commerce, avec une palette de couleurs triadique. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, construit avec Tailwind CSS.