Tableau de données des médias sociaux Monochromatique 3D Simple
Un composant de table de données de conception 3D simple et monochrome pour les interfaces de médias sociaux avec prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden"> <div class="overflow-x-auto"> <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg"> <thead> <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal"> <th class="py-3 px-6 text-left">User</th> <th class="py-3 px-6 text-left">Activity</th> <th class="py-3 px-6 text-center">Likes</th> <th class="py-3 px-6 text-center">Comments</th> </tr> </thead> <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light"> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/> </div> <span>John Doe</span> </div> </td> <td class="py-3 px-6 text-left">Posted a photo</td> <td class="py-3 px-6 text-center">125</td> <td class="py-3 px-6 text-center">36</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/> </div> <span>Jane Smith</span> </div> </td> <td class="py-3 px-6 text-left">Commented on a post</td> <td class="py-3 px-6 text-center">88</td> <td class="py-3 px-6 text-center">12</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/> </div> <span>Peter Jones</span> </div> </td> <td class="py-3 px-6 text-left">Shared a link</td> <td class="py-3 px-6 text-center">54</td> <td class="py-3 px-6 text-center">7</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/> </div> <span>Mary Williams</span> </div> </td> <td class="py-3 px-6 text-left">Liked a photo</td> <td class="py-3 px-6 text-center">201</td> <td class="py-3 px-6 text-center">45</td> </tr> </tbody> </table> </div></div>Composants associés
Organic_Nature_Dashboard_Data_Table
Il s’agit d’un composant de tableau de données de complexité modérée, inspiré de la nature et organique, pour les tableaux de bord avec une palette de couleurs vives, avec des lignes fluides, une réactivité et une prise en charge du mode sombre.
Composant Tableaux de données
Un composant de tables de données réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images d’espace réservé aléatoires.
Brutalist_ECommerce_Table
Un composant de table de données réactif de style brutaliste pour le commerce électronique, doté d’un contraste élevé, d’un schéma de couleurs complémentaires (jaune/violet) et d’une prise en charge du mode sombre. Conçu pour les listes de produits ou la gestion des commandes.