<!-- Smart Tire Pressure Monitor (TPMS) -->
<div class="smart-tire-pressure-tpms p-5 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-3">
  <div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
    <span class="text-[10px] font-black uppercase tracking-widest text-indigo-400">Tire Pressure Monitor (TPMS)</span>
    <span class="text-[10px] font-bold text-emerald-400">All Normal</span>
  </div>
  <div class="relative w-48 h-56 mx-auto bg-slate-950 rounded-2xl border border-slate-800 flex items-center justify-center p-3">
    <!-- Vehicle Wireframe Silhouette -->
    <div class="w-20 h-40 border-2 border-slate-700/50 rounded-2xl absolute"></div>
    <!-- 4 Wheels -->
    <div class="absolute top-4 left-2 text-[10px] font-black text-white bg-slate-900 px-1.5 py-0.5 rounded border border-emerald-500/50">FL: 2.3</div>
    <div class="absolute top-4 right-2 text-[10px] font-black text-white bg-slate-900 px-1.5 py-0.5 rounded border border-emerald-500/50">FR: 2.3</div>
    <div class="absolute bottom-4 left-2 text-[10px] font-black text-white bg-slate-900 px-1.5 py-0.5 rounded border border-emerald-500/50">RL: 2.5</div>
    <div class="absolute bottom-4 right-2 text-[10px] font-black text-white bg-slate-900 px-1.5 py-0.5 rounded border border-emerald-500/50">RR: 2.5</div>
    <span class="text-[9px] text-slate-500 font-bold uppercase tracking-widest z-10">BAR</span>
  </div>
</div>