Componente funcional de la atención médica

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden flex items-start justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden md:flex md:space-x-6 p-4 sm:p-6">
    
    <!-- Left Panel: Profile/Main Info -->
    <div class="flex-shrink-0 w-full md:w-1/3 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 pb-4 md:pb-0 md:pr-6 mb-4 md:mb-0">
      <div class="flex items-center space-x-4 mb-6">
        <img class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/86.jpg" alt="Patient Avatar">
        <div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">Patient ID: #HM-7890</p>
        </div>
      </div>
      
      <div class="space-y-3">
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          <span>DOB: 1975-04-12</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Location: Ward 3, Room 101</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.25m11.28-2.684a1 1 0 00-.948-.684H16a2 2 0 00-2 2v10a2 2 0 002 2h2.28a1 1 0 00.948-.684L22 10.75m-9.28 9.25l-.948 2.36a1 1 0 00.948 1.36h3.28c.188 0 .337-.156.242-.317l-1.442-2.894M5 10.75h2m-2 2h2"></path></svg>
          <span>Assigned Doctor: Dr. Elizabeth Grey</span>
        </div>
      </div>
      
      <button class="mt-6 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md text-sm transition duration-150 ease-in-out
                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
        View Full Record
      </button>
    </div>

    <!-- Right Panel: Data and Actions -->
    <div class="flex-1">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <!-- Sensor Data Card 1 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Heart Rate</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">72 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">bpm</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Stable</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 5 min</span>
        </div>

        <!-- Sensor Data Card 2 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Blood Pressure</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">120/80 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">mmHg</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Normal</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 1 hr</span>
        </div>

        <!-- Sensor Data Card 3 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Temperature</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">98.6 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">°F</span></p>
          <p class="text-xs text-orange-600 dark:text-orange-400">Steady</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 30 min</span>
        </div>

        <!-- Sensor Data Card 4 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Oxygen Saturation</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">97% <span class="text-lg font-normal text-gray-600 dark:text-gray-300">SpO2</span></p>
          <p class="text-xs text-red-600 dark:text-red-400">Slight dip</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 10 min</span>
        </div>
      </div>

      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Quick Actions</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <button class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-500">
          <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2m-2 0V3m2 2V3m-1 4h.01M16 11l-3-3m0 0l-3 3m3-3v8m0-13h2c.792 0 1.543.344 2.05 1.096L20.2 6.75a1.802 1.802 0 010 2.5L14 15.5m0-10.75v10m-3-10l-2 2-2-2