Composant d’affichage des prix
Un composant d’affichage de prix réactif avec un style Neumorphisme et une palette de couleurs complémentaire, conçu pour le contenu de blog avec prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<!-- Price Card -->
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<!-- Card Header -->
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Basic Plan</h3>
<span class="text-2xl font-bold text-blue-600 dark:text-teal-400">$29</span>
</div>
<!-- Card Features -->
<ul class="space-y-4 text-gray-700 dark:text-gray-300">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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>10 Users</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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>50GB Storage</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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 Support</span>
</li>
</ul>
<!-- Call to Action Button -->
<div class="mt-8">
<button class="w-full py-3 rounded-lg font-semibold text-white bg-blue-600 dark:bg-teal-600 shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transition duration-300 hover:opacity-90">
Get Started
</button>
</div>
</div>
<!-- Custom Neumorphism Shadows (defined in CSS) -->
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
.shadow-neumorphic-button-light {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
}
</style>
</div>Composants associés
Composant d’affichage des prix
Un composant d’affichage des prix ludique et joyeux avec des éléments arrondis et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Il est entièrement réactif et prend en charge le mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix de style Neumorphism avec une palette de couleurs complémentaires (orange doux et bleu clair), d’une complexité modérée pour le commerce électronique. Il présente un design réactif avec prise en charge du thème sombre. Le composant affiche une image, un titre et un prix du produit à l’aide d’un bouton « Ajouter au panier ». Le mode sombre utilise des couleurs complémentaires désaturées.
Cyberpunk Composant d’affichage des prix
Un composant d’affichage de prix réactif pour le conseil/les services avec une esthétique néon cyberpunk et futuriste. Dispose d’arrière-plans sombres, de couleurs d’accentuation analogues lumineuses et prend en charge le mode sombre.