Composant Tableaux de données
Glassmorphism Data Tables Composant aux couleurs vives pour le portefeuille, réactif avec prise en charge du mode sombre. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.
HTML Code
<div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
<div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
<h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
<div class="overflow-x-auto">
<table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
<thead>
<tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
<th class="px-6 py-3">Project Name</th>
<th class="px-6 py-3">Category</th>
<th class="px-6 py-3">Status</th>
<th class="px-6 py-3">Preview</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Vibrant Dash</td>
<td class="px-6 py-4">Dashboard UI</td>
<td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">AquaFlow Landing</td>
<td class="px-6 py-4">Website</td>
<td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Neon Chatbot</td>
<td class="px-6 py-4">Application</td>
<td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Retro Portfolio</td>
<td class="px-6 py-4">Portfolio</td>
<td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Composants associés
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.
Tableau de données sur le brutalisme
Un composant de tableau de données simple et brutaliste avec des couleurs analogues pour les sites Web d’entreprise. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Composant Tableaux de données
Un composant de tables de données réactif conçu dans le style Skeuomorphic avec prise en charge du thème sombre à l’aide de Tailwind CSS.