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
Composant Tableaux de données
Un composant de tableau de données réactif dans un design minimaliste et plat, adapté aux sites Web d’entreprise, avec prise en charge du thème sombre.
Grille de données rétro
Un composant de table de données réactif avec une esthétique rétro/vintage des années 80/90 utilisant Tailwind CSS. Il présente un design en blocs, des accents de couleurs vibrantes (violet/orange en mode clair, vert/néon en mode sombre) et une police monospace pour une sensation de technologie nostalgique. Le tableau comprend un style d’en-tête et de ligne distinct, des éléments bordés tels que des avatars et des badges de statut, et prend en charge le mode sombre via CSS. Les données d’espace réservé comprennent les avatars des utilisateurs, les coordonnées, les badges de statut, les rôles et les dates d’adhésion. La table est défilante horizontalement sur des écrans plus petits pour une meilleure réactivité.
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.