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 complexe d’affichage des prix conçu dans un style skeuomorphe imitant les éléments du monde réel, adapté aux blogs et à la consommation de contenu avec une palette de couleurs triadique et un design réactif avec prise en charge du 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.
Composant d’affichage des prix
Un composant d’affichage de prix complexe et réactif pour un tableau de bord, avec prise en charge du thème sombre, utilisant Tailwind CSS dans un design plat minimaliste en niveaux de gris.