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
Neon_Glow_Marketplace_Component
Un composant de marché complexe avec des éléments lumineux et lumineux et une palette de couleurs triadique, conçu pour les plates-formes multifournisseurs. Les fonctionnalités incluent des cartes de produits, des catégories, des recherches et des profils d’utilisateurs, tous réactifs et avec prise en charge du mode sombre.
Composant fonctionnel du blog
Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.
Skeuomorphic_Analogous_Simple_Business_Component
Un composant professionnel simple conçu avec un style skeuomorphe utilisant des couleurs analogues, réactif pour les ordinateurs de bureau, les tablettes et les mobiles, avec prise en charge du mode sombre.