Status Header Bar

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-x-3 ">
  <div class="flex items-center space-x-6">
    <div class="">
      <h1 class="lg:text-4xl text-3xl font-medium tracking-tight text-white">09:51</h1>
      <p class="text-sm text-gray-400 flex items-center space-x-2">
        <span class="">Tuesday • March 15, 2024</span>
      </p>
    </div>
    <div class="hidden lg:flex items-center space-x-4 bg-gray-800/50 rounded-full px-4 py-2 border border-gray-700/50">
      <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="w-4 h-4 text-blue-400">
        <path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"></path>
      </svg>
      <span class="text-sm text-gray-300">Climate: 22°C</span>
    </div>
  </div>
  <div class="flex items-center space-x-4">
    <div class="flex items-center space-x-3 bg-gray-800/50 rounded-full px-4 py-2 border border-gray-700/50">
      <div class="flex items-center space-x-2">
        <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="w-4 h-4 text-blue-400">
          <path d="m7 7 10 10-5 5V2l5 5L7 17"></path>
        </svg>
        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
      </div>
      <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="w-4 h-4 text-green-400">
        <path d="M12 20h.01"></path>
        <path d="M2 8.82a15 15 0 0 1 20 0"></path>
        <path d="M5 12.859a10 10 0 0 1 14 0"></path>
        <path d="M8.5 16.429a5 5 0 0 1 7 0"></path>
      </svg>
      <div class="flex items-center space-x-1">
        <span class="text-sm font-medium text-gray-300">5G</span>
        <div class="flex space-x-0.5">
          <div class="w-1 h-3 bg-green-400 rounded-full"></div>
          <div class="w-1 h-3 bg-green-400 rounded-full"></div>
          <div class="w-1 h-2 bg-green-400 rounded-full"></div>
          <div class="w-1 h-1 bg-gray-600 rounded-full"></div>
        </div>
      </div>
      <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="w-4 h-4 text-green-400">
        <path d="M 22 14 L 22 10"></path>
        <rect x="2" y="6" width="16" height="12" rx="2"></rect>
      </svg>
    </div>
  </div>
</div>