Luxury_Premium_Crypto_Stat_Card

<div class="p-4 sm:p-6 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden transform transition duration-300 hover:scale-105 border-b-4 border-emerald-600 dark:border-emerald-500">
    <div class="p-6 sm:p-8 space-y-4">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Current BTC Price</h3>
        <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.593 1M12 8V4m0 4a8 8 0 100 16m0-16v4"></path>
        </svg>
      </div>
      <p class="text-3xl sm:text-4xl font-extrabold text-emerald-700 dark:text-emerald-300 tracking-tight leading-tight">$45,678.90</p>
      <div class="flex items-center justify-between text-sm sm:text-base">
        <span class="text-gray-600 dark:text-gray-400">24h Change:</span>
        <span class="flex items-center text-red-500 dark:text-red-400 font-semibold">
          <svg class="w-4 h-4 mr-1" 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="M13 17l-5-5m0 0l5-5m-5 5h12"></path>
          </svg>
          -1.23%
        </span>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex justify-between items-center text-xs sm:text-sm text-gray-500 dark:text-gray-400">
        <span>Last updated:</span>
        <span>Just now</span>
      </div>
    </div>
  </div>
</div>