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
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.
Tableau de données sur le brutalisme
Un composant de table de données réactif au design brutaliste, avec prise en charge du mode sombre et des effets de survol.
Tableau de données
Composant de table de données réactif avec le style Material Design, avec prise en charge du mode sombre et du comportement réactif sans JavaScript. Comprend des images de remplacement pour la démonstration.