Composant d’affichage des prix
Composant d’affichage des prix avec un design réactif, la prise en charge du mode sombre et une palette de couleurs vives.
HTML Code
<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-6 py-8">
<h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
<p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
<div class="flex justify-center items-baseline mb-8">
<span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
<span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
</li>
</ul>
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
Get Started
</button>
</div>
</div>
</div>Composants associés
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.
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.
Composant d’affichage des prix
Un composant d’affichage des prix réactif pour un tableau de bord, avec des micro-interactions attrayantes et une palette de couleurs triadique, avec prise en charge du mode sombre.