Neumorphic Price Display Component
A complex, responsive, and dark-mode-compatible price display component with a Neumorphism design style and an analogous color scheme, suitable for blog/content consumption. Features multiple interactive elements like toggles and detailed tiers.
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>Related Components
Price Display Component
A complex price display component designed in skeuomorphic style mimicking real-world elements, suitable for blogs and content consumption with a triadic color scheme and responsive design with dark mode support.
Price Display Component
A responsive price display component for a dashboard, featuring engaging microinteractions and a triadic color scheme, with support for dark mode.
Price Display Component
A 3D styled price display component that supports dark mode and responsive effects, showcasing product price details.