Skeuomorphic_Earth_Tone_Data_Table
Una tabella di dati semplice e reattiva con uno stile di design scheumorfico e una combinazione di colori color terra, adatta per siti Web aziendali/aziendali. Include il supporto per la modalità oscura.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<div class="bg-stone-300 dark:bg-stone-800 shadow-md shadow-stone-400/50 dark:shadow-stone-950/50 rounded-xl p-4 sm:p-6 mb-8
border-t border-l border-stone-200 dark:border-stone-700
border-b border-r border-stone-400 dark:border-stone-900
inset-shadow-light dark:inset-shadow-dark">
<h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4
text-shadow-light dark:text-shadow-dark">
Project Overview
</h2>
<p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-relaxed">
This table displays key metrics and status for ongoing projects. Each row represents a project with its current status, budget, and completion rate.
</p>
</div>
<div class="overflow-x-auto relative rounded-xl shadow-lg shadow-stone-400/50 dark:shadow-stone-950/50
border-t border-l border-stone-200 dark:border-stone-700
border-b border-r border-stone-400 dark:border-stone-900
inset-shadow-light dark:inset-shadow-dark">
<table class="w-full text-sm text-left text-stone-500 dark:text-stone-400">
<thead class="text-xs text-stone-700 uppercase bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
rounded-t-lg
border-b border-stone-500 dark:border-stone-900
table-header-shadow">
<tr>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
Project Name
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden md:table-cell">
Manager
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
Status
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden sm:table-cell">
Budget
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden lg:table-cell">
Completion
</th>
<th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
Actions
</th>
</tr>
</thead>
<tbody>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Website Redesign
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<span>Jane Doe</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100
shadow-sm-light dark:shadow-sm-dark">
Completed
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$25,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: 100%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Mobile App Development
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<span>John Smith</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
shadow-sm-light dark:shadow-sm-dark">
In Progress
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$75,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-amber-500 h-2.5 rounded-full" style="width: 60%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Marketing Campaign
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<span>Emily White</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100
shadow-sm-light dark:shadow-sm-dark">
Planned
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$30,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
<tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
even:bg-stone-200 dark:even:bg-stone-900
hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
<th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
Q1 Financial Report
</th>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Avatar">
<span>David Lee</span>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
shadow-sm-light dark:shadow-sm-dark">
In Progress
</span>
</td>
<td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
$10,000
</td>
<td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
<div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
<div class="bg-amber-500 h-2.5 rounded-full" style="width: 85%"></div>
</div>
</td>
<td class="py-4 px-4 sm:px-6">
<a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
px-2 py-1 rounded
transition-all duration-200">
View
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<style>
/* Base for defining custom CSS variables for skeuomorphic effects */
:root {
--shadow-light-color-1: rgba(255, 255, 255, 0.7);
--shadow-light-color-2: rgba(0, 0, 0, 0.2);
--shadow-dark-color-1: rgba(0, 0, 0, 0.7);
--shadow-dark-color-2: rgba(255, 255, 255, 0.05);
}
/* Light mode shadows */
.inset-shadow-light {
box-shadow: inset -2px -2px 5px var(--shadow-light-color-1),
inset 2px 2px 5px var(--shadow-light-color-2);
}
.shadow-sm-light {
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(255, 255, 255, 0.5);
}
.shadow-inset-light {
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), inset -1px -1px 2px rgba(255, 255, 255, 0.5);
}
.text-shadow-light {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.1);
}
.table-header-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 2px 2px rgba(255, 255, 255, 0.5) inset;
}
.hover-button-inset-light {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.7);
}
.hover-button-inset-light:hover {
box-shadow: inset 2px 2px 5px var(--shadow-light-color-2),
inset -2px -2px 5px var(--shadow-light-color-1);
}
/* Dark mode shadows using custom properties */
.dark .inset-shadow-dark {
box-shadow: inset -2px -2px 5px var(--shadow-dark-color-1),
inset 2px 2px 5px var(--shadow-dark-color-2);
}
.dark .shadow-sm-dark {
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), -1px -1px 3px rgba(255, 255, 255, 0.05);
}
.dark .shadow-inset-dark {
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.8), inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
.dark .text-shadow-dark {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.dark .table-header-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3),
0 2px 2px rgba(0, 0, 0, 0.7) inset;
}
.dark .hover-button-inset-dark {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.05);
}
.dark .hover-button-inset-dark:hover {
box-shadow: inset 2px 2px 5px var(--shadow-dark-color-2),
inset -2px -2px 5px var(--shadow-dark-color-1);
}
/* Define custom colors */
.text-brown-600 {
color: #795548; /* A warm brown */
}
.dark .text-brown-400 {
color: #a1887f; /* A lighter warm brown for dark mode */
}
</style>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.
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.
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.