Componente Tabelle dati
Un semplice componente della tabella dati con colori del tono della terra, micro-interazioni e supporto per la modalità oscura, adatto per le interfacce dei social media.
Codice HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
User
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Joined
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/85.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
John Doe
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Active
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jan 10, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/45.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jane Smith
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Pending
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Feb 15, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/60.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Peter Jones
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Inactive
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Mar 20, 2023
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Componenti correlati
Tabella di dati del gradiente arcobaleno ispirato alla carta/stampa
Un componente semplice e reattivo per la tabella dei dati con un design ispirato alla carta/stampa e un sottile sfondo sfumato arcobaleno, adatto per le dashboard. Include il supporto per la modalità oscura.
ArtDecoCryptoDataTable
Un componente di tabella dati semplice e reattivo per applicazioni di criptovaluta/blockchain, progettato con motivi geometrici ispirati all'Art Déco e una combinazione di colori analoga. Include il supporto per la modalità oscura.
Componente Tabelle dati
Un componente reattivo per le tabelle di dati progettato con lo stile Neumorphism utilizzando Tailwind CSS, con supporto per temi scuri e immagini segnaposto casuali.