Componente di visualizzazione del prezzo

<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>