Tabella dei dati sanitari
Un componente di tabella dati reattivo e minimalista con tonalità blu aziendali, adatto per applicazioni sanitarie. Include il supporto per la modalità scura, la ricerca e l'impaginazione. Utilizza l'HTML semantico per l'accessibilità.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden ring-1 ring-blue-100 dark:ring-blue-900">
<div class="px-4 py-5 sm:px-6">
<h2 class="text-xl sm:text-2xl font-bold leading-tight text-blue-800 dark:text-blue-200">Patient Records</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">A list of all patients including their vital information and status.</p>
<div class="mt-4 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
<div class="relative flex-grow w-full sm:w-auto">
<input type="text" placeholder="Search records..." class="block w-full pl-10 pr-2 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
<button type="button" class="w-full sm:w-auto px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
Add Patient
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-blue-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Patient Name
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
ID
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Last Visit
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Condition
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
Status
</th>
<th scope="col" class="relative px-4 py-3">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
<!-- Row 1 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Jane Cooper</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00123</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-10-26</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
Hypertension
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Active
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Cameron Williamson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00124</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-09-15</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
Diabetes
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Active
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Esther Howard</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00125</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-11-01</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
Asthma
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100">
Pending
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 4 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Ralph Edwards</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00126</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-08-20</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Flu
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
Inactive
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
<!-- Row 5 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Patient avatar">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Annette Black</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">PT-00127</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">2023-10-05</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
Appendicitis
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
Critical
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-4 py-3 sm:px-6 flex items-center justify-between flex-wrap border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
Next
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">5</span>
of
<span class="font-medium">10</span>
results
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="z-10 bg-blue-50 dark:bg-blue-900 border-blue-500 text-blue-600 dark:text-blue-200 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</a>
<a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
2
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Griglia di dati retrò
Un componente reattivo della tabella dei dati con un'estetica retrò/vintage degli anni '80/'90 utilizzando Tailwind CSS. Presenta un design a blocchi, accenti di colore vivaci (viola/arancione in modalità chiara, verde/neon in modalità scura) e un carattere monospace per un tocco tecnologico nostalgico. La tabella include uno stile distinto di intestazione e riga, elementi con bordi come avatar e badge di stato e supporta la modalità oscura tramite CSS. I dati segnaposto includono avatar utente, informazioni di contatto, badge di stato, ruoli e date di iscrizione. La tabella è scorrevole orizzontalmente su schermi più piccoli per una migliore reattività.
Componente Tabelle dati
Un componente reattivo per le tabelle di dati progettato in stile Skeuomorphic con supporto per temi scuri utilizzando Tailwind CSS.
Componente Tabelle dati
Glassmorphism Data Tables Componente con colori vivaci per il portfolio, reattivo con supporto per la modalità scura. Non è necessario JavaScript, solo HTML con Tailwind CSS.