Composant Tableaux de données
Un composant de table de données réactif avec une conception Neumorphism, une palette de couleurs triadique et la prise en charge du mode sombre, adapté à un blog ou à un site de contenu.
HTML Code
<div class="p-8 font-sans antialiased text-gray-700 bg-gray-200 dark:bg-gray-900 dark:text-gray-200 transition-all duration-500">
<div class="p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">Our Latest Posts</h2>
<div class="overflow-x-auto">
<table class="w-full text-left table-auto">
<thead>
<tr>
<th class="p-4 rounded-tl-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Title</th>
<th class="p-4 bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Category</th>
<th class="p-4 rounded-tr-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Date</th>
</tr>
</thead>
<tbody>
<tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
<td class="p-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/post1/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
Exploring Neumorphism in UI Design
</div>
</td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-200 rounded-full dark:text-blue-200 dark:bg-blue-800">Design</span></td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-15</td>
</tr>
<tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
<td class="p-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/post2/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
The Future of Web Development
</div>
</td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">Technology</span></td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-20</td>
</tr>
<tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
<td class="p-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/post3/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
Mastering Tailwind CSS
</div>
</td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-red-800 bg-red-200 rounded-full dark:text-red-200 dark:bg-red-800">Front-end</span></td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-25</td>
</tr>
<tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
<td class="p-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/post4/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
A Journey into Minimalist Art
</div>
</td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">Art</span></td>
<td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-02-01</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<style>
/* Neumorphism shadows for light theme */
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a6a6a6, inset -5px -5px 10px #ffffff;
}
/* Neumorphism shadows for dark theme */
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #2e2e2e;
}
</style>
<script>
// This script is for demonstration purposes to toggle dark mode.
// In a real application, you might use a theme switcher or OS preference.
document.documentElement.classList.add('dark');
</script>Composants associés
Composant Tableaux de données
Un composant de tables de données réactif avec un design glassmorphism, avec des éléments translucides ressemblant à du verre givré, des effets de flou et la prise en charge du mode sombre.
Tableau de données Luxe/Premium pour les organismes à but non lucratif/caritatifs
Un composant de tableau de données élégant et réactif conçu avec une sensation de luxe/premium utilisant des tons bleus d’entreprise, adapté aux organisations à but non lucratif et caritatives. Inclut la prise en charge du mode sombre et une interface complexe pour l’affichage des données avec des actions.
Tableau de données sur les soins de santé
Un composant de table de données réactif et minimaliste avec des tons bleus d’entreprise, adapté aux applications de santé. Inclut la prise en charge du mode sombre, la recherche et la pagination. Utilise le HTML sémantique pour l’accessibilité.