Skeuomorphic_Earth_Tone_Data_Table
Un tableau de données simple et réactif avec un style de conception skeuomorphe et une palette de couleurs terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Tableaux de données
Un composant simple de table de données avec des couleurs de terre, des micro-interactions et la prise en charge du mode sombre, adapté aux interfaces de médias sociaux.
Composant Tableaux de données
Tableau de données réactif pour le tableau de bord avec prise en charge du thème sombre