Composant d’affichage des prix
Composant d’affichage des prix avec une esthétique rétro/vintage, un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl font-bold text-gray-900 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Product Description</p>
</div>
<div class="flex justify-center sm:justify-start items-baseline">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$</span>
<span class="text-4xl font-bold text-gray-900 dark:text-white">19.99</span>
<span class="text-sm text-gray-600 dark:text-gray-400">/month</span>
</div>
<div class="mt-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Buy Now
</button>
</div>
</div>
</div>
</div>
Composants associés
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.
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 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.