Energy Consumption Analytics 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">Energy Consumption</h2>
    <button class="text-slate-400 hover:text-slate-600 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
        <circle cx="12" cy="12" r="3"></circle>
      </svg>
    </button>
  </div>
  <div class="flex items-baseline gap-2 mb-6">
    <span class="text-4xl text-slate-900 font-medium">18.4</span>
    <span class="text-lg text-slate-500">kWh/100km</span>
  </div>
  <div class="space-y-4 text-sm mb-6">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
        <span class="text-slate-700">Highway</span>
      </div>
      <span class="text-slate-900 font-medium">15.2 kWh</span>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="h-2 w-2 rounded-full bg-blue-500"></span>
        <span class="text-slate-700">City</span>
      </div>
      <span class="text-slate-900 font-medium">21.8 kWh</span>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="h-2 w-2 rounded-full bg-purple-500"></span>
        <span class="text-slate-700">Regenerative</span>
      </div>
      <span class="text-emerald-600 font-medium">-3.2 kWh</span>
    </div>
  </div>
  <div class="grid grid-cols-12 gap-1 h-16 items-end">
    <div class="bg-emerald-300 rounded-t-sm h-8"></div>
    <div class="bg-emerald-400 rounded-t-sm h-12"></div>
    <div class="bg-emerald-300 rounded-t-sm h-6"></div>
    <div class="bg-emerald-500 rounded-t-sm h-14"></div>
    <div class="bg-emerald-400 rounded-t-sm h-10"></div>
    <div class="bg-emerald-600 rounded-t-sm h-16"></div>
    <div class="bg-emerald-500 rounded-t-sm h-12"></div>
    <div class="bg-emerald-400 rounded-t-sm h-8"></div>
    <div class="bg-emerald-300 rounded-t-sm h-6"></div>
    <div class="bg-emerald-400 rounded-t-sm h-10"></div>
    <div class="bg-emerald-500 rounded-t-sm h-14"></div>
    <div class="bg-emerald-400 rounded-t-sm h-9"></div>
  </div>
</div>