Billing Overview Card

<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');</style>
  <div class="font-inter">
    <div class="mb-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Account Overview</h3>
      <div class="flex items-center space-x-4 mb-4">
        <div class="bg-green-50 px-3 py-1 rounded-full">
          <span class="text-sm font-medium text-green-800">Free trial</span>
        </div>
        <div>
          <span class="text-sm text-gray-600">Credit remaining</span>
        </div>
      </div>
      <div class="text-3xl font-bold text-gray-900 mb-1">$0.00</div>
      <p class="text-xs text-gray-500 mb-6">Note: This does not reflect the status of your developer account.</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">Add payment method</button>
      <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm
        font-medium hover:bg-gray-200 transition-colors">View usage</button>
    </div>
  </div>
</div>