Crypto_Blockchain_Cards_Component

<div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">

    <!-- Card 1: Asset Overview -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100">Bitcoin (BTC)</h3>
          <span class="text-stone-500 dark:text-stone-400 text-sm">Your Balance</span>
        </div>
        <div class="flex items-center space-x-3 mb-2">
          <img class="w-8 h-8 rounded-full shadow-md" src="https://picsum.photos/id/1043/40/40" alt="Bitcoin Logo">
          <p class="text-3xl font-bold text-stone-900 dark:text-stone-50">0.05 BTC</p>
        </div>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6">$ 3,450.78 <span class="text-emerald-600 dark:text-emerald-400 text-base font-semibold">+1.2%</span></p>
        <div class="flex justify-between items-center text-sm">
          <span class="text-stone-500 dark:text-stone-400">24h Change:</span>
          <span class="text-emerald-600 dark:text-emerald-400 font-medium">+ $45.21</span>
        </div>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-200">
            View Details
          </button>
        </div>
      </div>
    </div>

    <!-- Card 2: Recent Transactions -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Recent Transactions</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-emerald-100 dark:bg-emerald-900 p-2 rounded-full">
                <svg class="w-5 h-5 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="M7 11c.902-1.705 2.128-3.037 3.551-4L15 8l-3 4m0 0l3 4m-3-4c-1.423.963-2.649 2.295-3.551 4"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Received ETH</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">From: 0x...abc</p>
              </div>
            </div>
            <span class="text-emerald-600 dark:text-emerald-400 font-semibold">+0.15 ETH</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-rose-100 dark:bg-rose-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-rose-600 dark:text-rose-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="M17 13l-5 5m0 0l-5-5m5 5V6"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Sent BTC</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">To: 0x...def</p>
              </div>
            </div>
            <span class="text-rose-600 dark:text-rose-400 font-semibold">-0.002 BTC</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-blue-600 dark:text-blue-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="M9 7h6m-3 2v4m-3 3h6m-3-6h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Staked ADA</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">Pool: CardanoStake</p>
              </div>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">+50 ADA</span>
          </li>
        </ul>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 border border-stone-300 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-100 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-75 transition duration-200">
            View All
          </button>
        </div>
      </div>
    </div>

    <!-- Card 3: Blockchain News / Updates -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
        <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/29/600/400" alt="Blockchain News">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent opacity-75"></div>
        <div class="absolute bottom-0 left-0 p-4 w-full">
          <span class="text-xs font-semibold text-stone-200 dark:text-stone-400 uppercase tracking-wide">News</span>
          <h3 class="text-lg font-semibold text-white dark:text-stone-50 leading-tight">Ethereum 'Merge' Success: A New Era for Crypto</h3>
        </div>
      </div>
      <div class="p-6 relative z-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 text-sm leading-relaxed">The highly anticipated Ethereum 'Merge' has been successfully completed, transitioning the network to Proof-of-Stake. This marks a significant milestone...</p>
        <div class="flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>September 15, 2023</span>
          <a href="#" class="text-amber-600 hover:underline dark:text-amber-500">Read more</a>
        </div>
      </div>
    </div>

  </div>
</div>