Composant d’affichage des prix
Un composant d’affichage de prix simple et réactif pour les annonces immobilières, avec des couleurs de terre et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-sans antialiased">
<div class="max-w-xs mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02]">
<div class="p-4 sm:p-5 flex flex-col items-center">
<p class="text-sm uppercase tracking-wider font-semibold text-stone-600 dark:text-stone-400 mb-1">Starting From</p>
<div class="flex items-baseline mb-4">
<span class="text-2xl sm:text-3xl font-bold text-green-700 dark:text-green-500 mr-1">$</span>
<span class="text-4xl sm:text-5xl font-extrabold text-stone-900 dark:text-stone-100 lining-nums tabular-nums">450,000</span>
</div>
<p class="text-sm text-stone-500 dark:text-stone-400 text-center leading-relaxed">
Estimated Price per unit
</p>
</div>
<div class="border-t border-stone-200 dark:border-stone-700 p-4 sm:p-5 text-center bg-stone-50 dark:bg-stone-700">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600 transform transition-transform duration-200 hover:-translate-y-0.5">
Learn More
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>Composants associés
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.
Composant d’affichage des prix
Un composant d’affichage des prix inspiré de la 3D avec une palette de couleurs monochromatiques, conçu pour les interfaces de médias sociaux. Il s’agit d’un composant complexe et réactif avec prise en charge du mode sombre, construit à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Composant d’affichage des prix 22
Un composant d’affichage de prix minimaliste qui met en valeur l’image, le nom, le prix et un bouton d’un produit à ajouter au panier. Conçu avec une réactivité et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.