Composante fonctionnelle des soins de santé
Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.
HTML Code
<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-2Composants associés
Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Composants fonctionnels
Composant fonctionnel de tableau de bord minimaliste avec un design réactif et une prise en charge du thème sombre.
Composants fonctionnels
Un composant fonctionnel avec un design skeuomorphique, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.