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.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 print-effect">
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">Dashboard Data</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Overview of recent activities.</p>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Project
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Due Date
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Members
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Q3 Marketing Campaign</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-700 dark:text-green-100">
Completed
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-09-30
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Website Redesign V2</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-700 dark:text-yellow-100">
In Progress
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-11-15
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
</div>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Client Onboarding Process</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-700 dark:text-blue-100">
Pending
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-01
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar">
</div>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Annual Budget Review</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-700 dark:text-red-100">
Delayed
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-12-31
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-right">
<p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
</div>
</div>
<style>
/* Basic print-like shadow/border, optional for subtle effect */
.print-effect {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Optional: Add a subtle paper texture or slight curl via pseudo-elements */
.print-effect::before,
.print-effect::after {
content: '';
position: absolute;
z-index: -1;
transform: rotate(-0.5deg);
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.print-effect::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
}
.print-effect::after {
top: 0;
right: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(0.5deg);
}
.print-effect:hover::before {
transform: rotate(-1deg);
}
.print-effect:hover::after {
transform: rotate(1deg);
}
</style>
</div>Componenti correlati
Componente Tabelle dati
Componente Tabelle di dati reattive con supporto per la modalità oscura utilizzando Tailwind CSS
Luxury_Premium_Manufacturing_Data_Table
Un componente complesso e reattivo per la tabella dei dati per uso manifatturiero/industriale, caratterizzato da un design di lusso/premium con una combinazione di colori in bianco e nero e un unico colore d'accento brillante. Include il supporto per la modalità oscura ed elementi interattivi.
Tabella dati lusso/premium per organizzazioni non profit/beneficenza
Un componente di tabella dati elegante e reattivo, progettato con un aspetto lussuoso/premium che utilizza toni blu aziendali, adatto per organizzazioni senza scopo di lucro e di beneficenza. Include il supporto per la modalità oscura e un'interfaccia complessa per la visualizzazione dei dati con le azioni.