System Health Status Card

<div class="bg-gradient-to-br from-white to-slate-50 rounded-2xl p-6 border border-slate-100 shadow-lg hover:shadow-xl transition-shadow duration-300 w-[300px]">
  <div class="flex items-start justify-between mb-4">
    <h2 class="text-slate-900 font-medium">System Health</h2>
    <a href="#" class="text-xs text-blue-600 hover:text-blue-800 transition-colors">View all</a>
  </div>
  <div class="mb-4">
    <span class="text-4xl text-slate-900 font-medium">1</span>
    <p class="text-sm text-slate-600">alert pending</p>
  </div>
  <div class="space-y-3 mb-6">
    <div>
      <div class="flex justify-between text-xs text-slate-600 mb-1">
        <span>Battery Health</span>
        <span>98%</span>
      </div>
      <div class="h-2 bg-slate-200 rounded-full">
        <div class="h-2 bg-emerald-500 rounded-full" style="width: 98%"></div>
      </div>
    </div>
    <div>
      <div class="flex justify-between text-xs text-slate-600 mb-1">
        <span>Motor Performance</span>
        <span>94%</span>
      </div>
      <div class="h-2 bg-slate-200 rounded-full">
        <div class="h-2 bg-emerald-500 rounded-full" style="width: 94%"></div>
      </div>
    </div>
    <div>
      <div class="flex justify-between text-xs text-slate-600 mb-1">
        <span>Software Update</span>
        <span>Pending</span>
      </div>
      <div class="h-2 bg-slate-200 rounded-full">
        <div class="h-2 bg-amber-400 rounded-full" style="width: 65%"></div>
      </div>
    </div>
  </div>
  <div class="text-xs text-slate-600">
    <p>
      Next service in
      <span class="text-slate-900 font-medium">8,500 km</span>
    </p>
  </div>
</div>