Neumorphic Weather Card Display

<div
  class="flex group cursor-pointer overflow-hidden bg-gradient-to-br from-[#222225] to-[#161618] h-[140px] border-[#2a2a2c] border rounded-3xl mt-4 pt-4 pr-4 pb-4 pl-4 relative shadow-[8px_8px_16px_#050505,-4px_-4px_10px_#2a2a2c] items-center">
  <!-- Vent Grips -->
  <div class="absolute left-3 top-1/2 -translate-y-1/2 flex flex-col gap-1.5">
    <div class="w-1.5 h-6 bg-[#0a0a0c] rounded-full shadow-[inset_1px_1px_3px_#000,0_1px_0_rgba(255,255,255,0.05)]">
    </div>
    <div class="w-1.5 h-6 bg-[#0a0a0c] rounded-full shadow-[inset_1px_1px_3px_#000,0_1px_0_rgba(255,255,255,0.05)]">
    </div>
  </div>

  <!-- Inner Screen -->
  <div
    class="ml-6 bg-[#050505] rounded-2xl shadow-[inset_4px_4px_8px_#000,0_1px_0_rgba(255,255,255,0.05)] p-3 flex flex-col justify-center h-full w-[100px] border border-black relative overflow-hidden">
    <div class="text-[#ffa600] text-4xl font-thin tracking-tighter drop-shadow-[0_0_8px_rgba(255,166,0,0.6)] z-10">19°
    </div>
    <div class="text-[10px] uppercase font-bold text-[#888] tracking-widest z-10 mt-2">H:24 L:18</div>
    <div
      class="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(255,166,0,0.05)_2px,rgba(255,166,0,0.05)_4px)] z-0">
    </div>
  </div>

  <!-- Engraved Info -->
  <div class="flex-1 flex flex-col justify-center items-end text-right pr-2">
    <div class="text-[#888] text-sm font-semibold tracking-widest uppercase [text-shadow:0_1px_1px_rgba(0,0,0,0.8)]">
      Montreal</div>
    <div class="text-[10px] uppercase font-bold text-[#555] tracking-widest mt-1">Partly Cloudy</div>
    <div
      class="w-8 h-8 rounded-full bg-[#111] shadow-[inset_2px_2px_4px_#000,0_1px_0_rgba(255,255,255,0.05)] border border-[#222] flex items-center justify-center mt-3">
      <iconify-icon icon="solar:cloud-sun-2-outline" style="stroke-width: 1.5; color: rgb(102, 102, 102)"
        class="text-[#666] w-5 h-5" width="20" height="20"></iconify-icon>
    </div>
  </div>
</div>